不能只靠CSS实现全屏背景图视差渐隐轮播，必须用三层绝对定位DOM+JS驱动：每层独立承担视差位移（transform）、轮播切换（opacity）和图片更新（background-image），并统一由requestAnimationFrame调度以避免掉帧与冲突。
不能只靠 CSS 实现“全屏背景图视差渐隐轮播”——它本质是三个独立效果的叠加，必须拆解处理：视差滚动、背景图轮播、淡入淡出动画。三者冲突点极多，硬塞进一个 background 声明里必然失效。
为什么 background-attachment: fixed + animation 会失败
常见错误是给同一个元素同时写 background-attachment: fixed 和 @keyframes 动画切换 background-image。这在所有主流浏览器中都会失败，原因有三：
- 浏览器不支持在
background-image变更时保持fixed锚定；每次换图都会重置背景坐标系，导致视差“跳帧”甚至完全丢失 -
background-attachment: fixed在父容器含transform、filter或opacity（哪怕opacity: 0.99）时，计算值直接退化为scroll，DevTools 里看到的就是scroll - 移动端（iOS Safari / Android WebView）对
fixed是静默禁用，不是 bug，是主动降级，@keyframes切图后根本不会触发视差位移
真正可行的三层结构：JS 驱动 + 独立 DOM 层
必须放弃“单元素背景轮播”幻想，改用三层绝对定位 DOM 元素，各自承担一项职责：
-
.parallax-bg-1、.parallax-bg-2、.parallax-bg-3：三个同尺寸全屏div，分别设不同background-image，position: absolute; inset: 0;，background-size: cover;，background-position: center; - 每层设不同
z-index（如 1 / 2 / 3），但都低于内容层（.content的z-index: 10） - 视差位移用
transform: translateY()，不是background-position—— 后者在快速滚动时易卡顿且精度低 - 轮播切换时，只改变当前活跃层的
opacity（从 0 → 1），其他两层保持opacity: 0；切换完成后再更新各层的background-image地址（避免预加载空白）
requestAnimationFrame 节流的关键参数
直接监听 scroll 事件更新 transform 会导致严重掉帧，尤其在低端安卓机上。必须用 requestAnimationFrame 封装，且注意以下细节：
立即学习“前端免费学习笔记（深入）”；
- 位移比例建议取
window.scrollY * 0.3（后景）到window.scrollY * 0.7（前景），数值越大视差越强，但超过 0.8 容易产生视觉撕裂 - 轮播切换时机应避开滚动峰值：用
getBoundingClientRect().top判断当前层是否进入可视区 80% 再触发opacity过渡，而非硬编码scrollY > 500px - 所有背景图尺寸至少为容器宽高的 1.5 倍，避免
cover裁剪后露出边缘空白 - 禁用
will-change: transform在轮播层上——它会强制创建新合成层，与视差位移逻辑冲突，反而降低性能
最易被忽略的一点：轮播图的“渐隐”不是靠 opacity 动画本身，而是靠三层 DOM 的 opacity 交叉控制。如果只用一个元素切图再加 fade 动画，视差位移就会中断。必须让位移和透明度更新发生在同一帧内，且由同一个 requestAnimationFrame 回调统一调度。
