background-attachment: fixed在移动端失效，必须用body::before伪元素配合position: fixed实现跨端稳定固定背景，需满足margin:0、四边定位、z-index:-1、pointer-events:none等全部条件。
background-attachment: fixed 在 iOS Safari 和多数安卓 WebView 中根本不起作用——不是你代码写错了，是浏览器主动禁用。桌面端虽能跑通，但滚动时容易闪动、错位，甚至触发重绘卡顿。真正跨端稳定的做法，是用 body::before 伪元素配合 position: fixed。
为什么 background-attachment: fixed 经常失效
它依赖“背景锚定到视口”这个前提，但只要 html 或 body 有以下任一属性，就会被浏览器强制降级为 scroll 行为：
-
transform（哪怕只是transform: translateZ(0)） -
filter（包括filter: none） -
will-change（含will-change: transform） -
perspective或backface-visibility -
overflow: auto或overflow: hidden配合position: relative的父容器
iOS Safari 所有版本都不支持该属性；Android Chrome v56+ 也默认静默降级。DevTools 里样式明明“生效”，但滚动时图照常动，控制台不报错也查不到原因。
用 body::before 实现真正跨端稳定的固定背景
这不是备选方案，而是当前兼容性、可控性和性能综合最优解。必须满足全部条件才能真正生效：
-
body { margin: 0; }——否则伪元素会因默认外边距错位一像素 -
body::before必须设position: fixed; top: 0; left: 0; width: 100%; height: 100%;（注意用%，不用vw/vh，后者在 iOS 横屏时可能漏边） -
z-index: -1——缺了就盖住所有内容 -
pointer-events: none——否则点击和滚动事件全被拦截 -
background-size: cover和background-position: center center显式声明——不配齐，图片会拉伸、偏移或只露一角
移动端要不要加 JS 适配
绝大多数情况不需要。伪元素方案在 iOS 17+、Android Chrome 120+、Edge 115+ 均稳定运行。只有两种场景才需 JS 干预：
- 页面存在横向滚动（比如超宽表格），此时
left: 0无法随scrollLeft动态修正 —— 得监听scroll并手动更新transform: translateX() - 需要视差滚动效果（如背景移动速度慢于内容），得用
window.scrollY动态计算并设置background-positionY，且必须节流
别混淆 background-attachment: local 和 fixed
local 不是“本地化”，而是“随局部内容滚动”——它会让背景图跟着容器内可滚动区域一起动。例如一个 div 设置了 overflow-y: scroll，里面文字滚动时，background-attachment: local 的背景也会跟着文字滑上去。这和“背景不动”的需求完全相反，选错就等于白调。
最易被忽略的是：伪元素方案中 width: 100% 和 height: 100% 必须同时存在，且不能被任何父级的 overflow 或 transform 截断；z-index: -1 和 pointer-events: none 缺一不可，少一个就导致交互异常或内容被遮挡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
