在网页里实现背景图片切换，常见做法是放一个显眼的按钮，点击后更换 body 的 background-image。但如果产品希望界面保持极简，或者背景切换只是一个辅助功能，不能占用视觉空间，就需要把按钮做成隐藏状态。隐藏按钮的核心矛盾在于：它必须从视觉上消失，却又不能失去可交互性，还得兼顾键盘用户和屏幕阅读器的访问需求。下面从隐藏方案、切换逻辑、状态持久化和实际细节几个角度展开。

一、隐藏按钮的几种实现方式及其可访问性

隐藏一个元素最直接的方式是 display:none，但它会把元素从渲染树中移除，按钮无法接收点击事件，也不能通过 Tab 键获得焦点。也就是说，display:none 只适合彻底移除功能，不适合做隐藏触发入口。类似地，visibility:hidden 虽然保留元素占位，但同样不会响应鼠标或键盘事件，因此也不能直接采用。

真正适合隐藏按钮的 CSS 方案主要有三类：使用 opacity:0 让按钮完全透明；使用绝对定位把按钮移出可视区域；使用 clip-path 或裁剪样式使其不可见。透明方案保留按钮的点击区域，适合鼠标用户；移出可视区域的方案通常配合屏幕阅读器使用，把按钮压缩为 1 像素大小，不影响布局，也不会出现在视觉界面上。

<button id="bgToggle" class="visually-hidden-btn" type="button" aria-label="切换背景图片">切换背景</button>

/* 视觉隐藏但保留可访问性 */
.visually-hidden-btn {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* 完全透明但保留点击区域 */
.ghost-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  opacity: 0;
  cursor: pointer;
  border: none;
  background: transparent;
}

这两种方式可以配合使用。例如默认用 visually-hidden-btn 让按钮对视觉用户不可见，但键盘用户按 Tab 键依然能把焦点移动到按钮上。当按钮获得焦点时，可以再通过 :focus-visible 把按钮临时显示出来，给键盘操作提供反馈。如果还需要鼠标用户能点击到固定区域，可以使用透明覆盖层方案，但要注意给按钮加上 aria-label，否则屏幕阅读器只能读出按钮文本，如果文本同样被隐藏，用户无法知道这个按钮的作用。

移动端触控场景下，1 像素大小的隐藏按钮基本无法点击。若确实需要保留触控入口，建议使用透明覆盖层并保证触控目标不小于 44×44 像素。不要依赖 title 提示，因为移动端浏览器不会可靠展示。

二、用 JavaScript 循环切换背景图片的两种实现方式

隐藏按钮只是入口，核心逻辑是把按钮点击事件与背景图切换关联起来。最直观的做法是在 JavaScript 中维护一个图片地址数组，每次点击时更新 document.body.style.backgroundImage。这种方式适合背景图地址来自接口或需要动态拼装的场景，代码量少，但样式逻辑分散在 JS 中。

const btn = document.getElementById('bgToggle');
const images = [
  'url(images/forest.jpg)',
  'url(images/ocean.jpg)',
  'url(images/mountain.jpg)'
];
let currentIndex = 0;
btn.addEventListener('click', function () {
  currentIndex = (currentIndex + 1) % images.length;
  document.body.style.backgroundImage = images[currentIndex];
  document.body.style.backgroundSize = 'cover';
  document.body.style.backgroundPosition = 'center';
});

另一种更推荐的方式是切换 CSS 类名。把不同背景图定义在样式表中，JavaScript 只负责替换 body 上的类名。这样做的好处是样式集中管理，图片地址、定位方式和响应式规则都由 CSS 控制，后续维护更清晰。比如下面定义了三个背景类：

body.bg-forest {
  background-image: url('images/forest.jpg');
  background-size: cover;
  background-position: center;
  background-color: #1e3a2f;
}
body.bg-ocean {
  background-image: url('images/ocean.jpg');
  background-size: cover;
  background-position: center;
  background-color: #0b2e4a;
}
body.bg-mountain {
  background-image: url('images/mountain.jpg');
  background-size: cover;
  background-position: center;
  background-color: #3a3a3a;
}

对应 JavaScript 只需要处理类名数组：

const btn = document.getElementById('bgToggle');
const bgClasses = ['bg-forest', 'bg-ocean', 'bg-mountain'];
let currentIndex = 0;
btn.addEventListener('click', function () {
  document.body.classList.remove(bgClasses[currentIndex]);
  currentIndex = (currentIndex + 1) % bgClasses.length;
  document.body.classList.add(bgClasses[currentIndex]);
});

两种方案也可以混合使用：当用户选择固定背景时切成类名控制，当需要从服务端获取随机图片时再改成 style 覆盖。不过要注意，如果同时使用了类名和内联 style，内联样式的优先级更高，清理时要同时移除内联样式，否则类名切换可能不生效。

切换背景图时还要考虑加载延迟。如果图片体积较大，第一次切换会先出现空白或背景色，再显示图片。解决思路是使用 new Image() 提前加载所有背景图，等图片加载完成后再允许切换，或者至少在初始化时预加载相邻图片。

const imageUrls = [
  'images/forest.jpg',
  'images/ocean.jpg',
  'images/mountain.jpg'
];
imageUrls.forEach(function (url) {
  const img = new Image();
  img.src = url;
});

三、让选择被记住：本地存储与键盘快捷键

如果用户切换背景后刷新页面又回到默认背景，功能会显得不完整。可以把当前背景索引保存到 localStorage 中，下次访问时读取并恢复。需要注意 localStorage 在部分浏览器隐私模式下可能抛出异常，读取时应做容错处理。

const STORAGE_KEY = 'bg-image-index';
function saveIndex(index) {
  try {
    localStorage.setItem(STORAGE_KEY, String(index));
  } catch (error) {
    // 隐私模式或存储已满时忽略保存失败
  }
}
function loadIndex() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    const index = parseInt(raw, 10);
    if (Number.isInteger(index) && index >= 0 && index < bgClasses.length) {
      return index;
    }
  } catch (error) {
    // 读取失败时返回默认值
  }
  return 0;
}
let currentIndex = loadIndex();
document.body.classList.add(bgClasses[currentIndex]);

保存逻辑可以放在点击事件里：每次切换后调用 saveIndex(currentIndex)。这样即使用户关闭页面，下次打开仍会保持之前的背景选择。如果不想让保存影响首屏渲染，可以在页面加载完成后再应用类名，减少闪烁。

隐藏按钮无法被视觉用户发现，提供键盘快捷键是一个很好的补充。可以监听全局 keydown 事件，当用户按下指定按键时触发按钮的点击事件。但要注意避免在输入框、文本域或可编辑区域中误触发。

document.addEventListener('keydown', function (event) {
  const target = event.target;
  if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
    return;
  }
  if (event.key === 'b' || event.key === 'B') {
    btn.click();
  }
});

快捷键最好在界面中有所提示。如果按钮在获得焦点时显示，可以在按钮文本或附近区域提示快捷键，例如使用 <kbd>b</kbd> 这样的语义标签。注意不要在正文中展示大段提示，这里仅作为示例。

四、实际应用中的几个注意点

移动端背景图的体积对加载速度影响很大。如果桌面端直接使用 1920 像素宽的大图，手机端会浪费流量且加载缓慢。可以通过媒体查询为不同屏幕指定不同尺寸的背景图：

body.bg-forest {
  background-image: url('images/forest-small.jpg');
}
@media (min-width: 768px) {
  body.bg-forest {
    background-image: url('images/forest-large.jpg');
  }
}

背景图加载失败时至少让页面有可读的背景色。上面示例里已经给每个背景类设置了 background-color，这是简单有效的兜底。还可以使用多个背景图叠加，让图片在上层、纯色在下层，这样即使图片失败，背景色仍会显示。

兼容性方面，clip-path 在较老浏览器中需要加 -webkit- 前缀，:focus-visible 的支持情况也需要注意。对于不支持 :focus-visible 的浏览器，可以使用 :focus 作为降级方案。无障碍测试时，建议用 Tab 键完整走一遍页面，确认隐藏按钮可以被聚焦，屏幕阅读器能读出按钮名称。

总结起来，隐藏按钮切换背景图片并不是单纯把按钮藏起来那么简单。选择可交互的隐藏方式、合理组织背景切换逻辑、加上状态持久化和快捷键，才能让这个看似不起眼的小功能在真实项目里稳定好用。