CSS 的 background-image 属性本身不可动画，无法通过 transition 实现渐变切换；正确方案是叠加多个固定定位的背景图层，通过控制 opacity 实现淡入淡出效果。

css 的 `background-image` 属性本身不可动画，无法通过 `transition` 实现渐变切换；正确方案是叠加多个固定定位的背景图层，通过控制 `opacity` 实现淡入淡出效果。

要实现「内容滚动、背景图固定且随滚动平滑切换」的效果，关键在于理解 CSS 动画限制：background-image 不是可过渡（animatable）属性，因此直接修改 backgroundImage 并设置 transition: background-image 1.5s ease 不会生效（W3C 可动画属性列表中明确排除了该属性）。

✅ 正确思路：采用多图层叠加 + opacity 过渡
为容器创建多个 ::before 伪元素（或实际

子元素），每个图层独立设置 background-image 和 position: fixed，再通过 JS 切换其 opacity（0 ↔ 1），利用 transition: opacity 实现自然淡变。

以下是完整、轻量、高性能的实现方案：

<div class="background-container">
  <div class="bg-layer" data-index="0" style="background-image: url('image1.jpg');"></div>
  <div class="bg-layer" data-index="1" style="background-image: url('image2.jpg');"></div>
</div>

.background-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更顺滑的缓动 */
  z-index: -1;
}

/* 默认显示第一张图 */
.bg-layer[data-index="0"] {
  opacity: 1;
}

document.addEventListener('DOMContentLoaded', () => {
  const layers = document.querySelectorAll('.bg-layer');
  const total = layers.length;
  let currentIndex = 0;

  const updateBackground = () => {
    const scrollY = window.scrollY;
    // 示例逻辑：滚动超过 300px 切换第二张图，否则回第一张
    const targetIndex = scrollY > 300 ? 1 : 0;

    if (targetIndex !== currentIndex) {
      layers[currentIndex].style.opacity = '0';
      layers[targetIndex].style.opacity = '1';
      currentIndex = targetIndex;
    }
  };

  window.addEventListener('scroll', updateBackground);
  // 首屏初始化（确保初始状态正确）
  updateBackground();
});

⚠️ 注意事项：

• 所有 .bg-layer 必须设为 position: fixed 且 z-index: -1，确保它们固定在视口、不随内容滚动，同时不影响主体内容层叠；
• 使用 cubic-bezier() 替代 ease 可获得更细腻的过渡感（如示例中的 cubic-bezier(0.25, 0.46, 0.45, 0.94)）；
• 若需支持更多图片，只需扩展 HTML 中的 .bg-layer 元素，并在 JS 中动态管理索引与透明度；
• 避免在 scroll 事件内频繁操作 classList 或重排样式——本方案仅修改 opacity（触发合成层，性能友好），已做防抖优化（无重复切换）。

此方法兼容所有现代浏览器，无需第三方库，语义清晰、易于维护，是实现「固定背景图滚动切换」的专业级实践方案。