应避免使用 background-attachment: fixed 实现多层视差，因其在chrome v99+和safari中普遍失效，且不支持速度调节；推荐用 perspective + translatez 的纯css 3d方案或 requestanimationframe + scroll 的js方案。
别用 background-attachment: fixed 做多层视差——它在 Chrome v99+ 和所有 Safari 中基本失效，且不支持速度调节，强行用只会让所有层“卡死”在视口不动。
为什么 background-attachment: fixed 在多层场景下必然失败
它不是“没写对”，而是浏览器主动降级：只要任意父级或自身有 transform、filter、opacity（哪怕 0.99）、will-change，就会静默变成 scroll；移动端 iOS Safari 几乎完全无视该属性；fixed 只支持“固定 or 滚动”，没有中间速度——你无法让中景比背景慢 30%、比前景快 20%。
常见错误现象：
- 写了一堆
.layer-1～.layer-3都设background-attachment: fixed，结果全跟着内容一起滚 - 加了
transform: translateZ(0)试图触发硬件加速，反而直接废掉 fixed 行为 - 在
overflow: auto的容器里用local，但没意识到它只响应容器内滚动，不是页面主滚动
用 perspective + translateZ 实现真正可控的多层 CSS 视差
这是目前唯一无需 JS、兼容性好（Chrome/Firefox/Edge 全支持）、且能精确控制纵深关系的纯 CSS 方案。原理是利用 3D 空间中 Z 轴距离差异，让不同层在滚动时自然产生位移差。
关键参数组合必须同时满足：
- 外层容器设
perspective: 1px（值越小，视差越强；0.5px～2px是安全区间） - 各层需设
transform-style: preserve-3d（否则子元素被拍平，Z 轴无效） - 背景层用
transform: translateZ(-2px) scale(3)（负值越深，移动越慢；scale 用于补偿远距离缩放） - 中景层用
transform: translateZ(-1px) scale(2) - 前景层用
transform: translateZ(0)或微正数如translateZ(0.5px)
示例结构：
<div class="parallax" style="perspective: 1px">
<div class="parallax__group" style="transform-style: preserve-3d">
<div class="parallax__layer layer-back" style="transform: translateZ(-2px) scale(3)"></div>
<div class="parallax__layer layer-base" style="transform: translateZ(-1px) scale(2)"></div>
<div class="parallax__layer layer-fore" style="transform: translateZ(0)"></div>
</div>
</div>
用 requestAnimationFrame + scroll 事件做精准比例控制
当需要自定义滚动系数（比如背景移动速度 = scrollTop * 0.3，前景 = scrollTop * 1.2），或兼容老浏览器、支持复杂交互动效时，JS 是唯一可靠路径。
实操要点：
- 别在
scroll回调里直接改el.style.backgroundPositionY——会强制同步重排，卡顿明显 - 统一用
transform: translateY()，并包裹在requestAnimationFrame中 - 用
el.getBoundingClientRect().top计算当前视口位置，比依赖window.scrollY更稳定（尤其页面有 sticky header 时） - 加防护：
if (!el.offsetParent) return，避免元素未挂载或display: none时报错 - 移动端必须降级：用
@supports not (background-attachment: fixed)或 UA 判断 iOS，fallback 到background-attachment: scroll+background-size: 100% auto防拉伸
容易被忽略的细节：过渡动画与性能陷阱
很多人加 transition: background-position 0.3s ease 想让视差“缓入缓出”，但这是反模式——滚动是高频连续事件，CSS 过渡会累积延迟、造成抖动；正确做法是靠 JS 控制 easing 函数（如 cubic-bezier(0.25, 0.46, 0.45, 0.94)）动态计算偏移量。
另一个隐形坑：scale() 补偿必须和 translateZ() 成对出现，否则层会严重缩放失真；而 scale() 本身会触发重绘，若层数过多（>4 层），建议在低端设备上降级为单层 fixed + JS fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
