background-attachment: fixed 在绝大多数场景下失效，仅在 body 上且无层叠上下文时可能生效；移动端基本不支持；推荐用 transform: translatez() + perspective 实现视差或 js + requestanimationframe 精确控制。
background-attachment: fixed 在绝大多数实际页面中根本不会生效——不是你漏写了 background-image，也不是没设 height，而是浏览器主动把它当摆设了。
为什么 background-attachment: fixed 在子元素里总失效
它只在极少数条件下能跑通：必须直接写在 body 上，且 body 不能有任何触发层叠上下文的样式。一旦父级或自身加了 transform、filter、opacity: 0.99 或 will-change，浏览器（尤其是 Chrome v99+ 和所有 Safari）就静默降级为 scroll，控制台连 warning 都不抛。
-
background-attachment只对设置了background-image的元素起效，纯色或渐变背景也得显式声明图片（哪怕用url("data:image/svg+xml,...")占位） - 移动端 iOS Safari 几乎完全无视该属性，哪怕写在
body上也大概率退化 - 如果容器靠内容撑高（比如没设
height或min-height），视差行为会直接消失
用 transform: translateZ() + perspective 替代 fixed
这是目前最可控、兼容性最好的纯 CSS 多层视差方案。原理是利用 3D 空间中的 Z 轴距离差异，让不同层级在滚动时自然产生速度差，无需 JS 也能响应滚动。
- 给外层容器设
perspective: 1px（值越小，视差越强） - 各视差层分别设
transform: translateZ(-0.5px)、translateZ(-1px)等负值，越负越“远”，滚动时移动越慢 - 必须配套
transform-style: preserve-3d，否则子元素会被拍平 - 要补偿因 Z 轴缩放导致的尺寸变化，加
scale(2)或类似值手动拉回原大小
JS 方案：监听 scroll + requestAnimationFrame
当需要精确控制滚动比例、支持多层不同系数、或兼容老浏览器时，JS 是绕不开的选择。关键不是“能不能动”，而是“怎么动才不卡”。
- 别在
scroll回调里直接改style.top或style.backgroundPosition，这会强制同步重排 - 改用
transform: translateY()，并包裹在requestAnimationFrame中 - 用
getBoundingClientRect().top计算元素当前视口位置，比scrollTop更稳定 - 元素未进入 DOM 或被
display: none时，先加if (!el.offsetParent) return;防止报错
移动端必须做的降级处理
别指望 fixed 在手机上工作。真要上线，必须用 @supports not (background-attachment: fixed) 做兜底，或者直接按 UA 判断 iOS/Android。
- 降级后改用
background-attachment: scroll+background-size: 100% auto，防止图片被cover拉伸变形 - 3D 方案在低端 Android 上可能闪烁，可加
backface-visibility: hidden - JS 方案务必节流：用
IntersectionObserver替代全页scroll监听，只激活当前可见区域的视差层
真正难的从来不是“怎么做出效果”，而是“怎么让效果在 Chrome、Safari、iOS、低端 Android 上都看起来像一回事”。background-attachment: fixed 是个幻觉，早点放弃它，转向 transform 或轻量 JS，反而省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
