background-attachment: fixed 在移动端失效是浏览器主动禁用策略，iOS Safari 和 Android Chrome 84+ 均默认忽略；应改用 position: fixed 全屏背景层或 position: sticky 替代。
background-attachment: fixed 在移动端根本不起作用——不是你写错了，是 iOS Safari 和 Android Chrome（84+）主动禁用它。别花时间调 transform: translateZ(0) 或加 -webkit-background-attachment，这些在当前主流环境下基本无效。
为什么 background-attachment: fixed 在手机上完全失效
这不是 bug，是浏览器的明确策略：为避免滚动卡顿和内存暴涨，iOS Safari 很早就废弃该行为；Android Chrome 84 起默认忽略；微信、QQ、安卓原生 WebView 全部跟随。DevTools 里样式明明“生效”，但背景图照常滚动——这是静默降级，控制台不会报错，也查不到原因。
常见现象包括：
- 页面一滚动，背景图立刻跟着动，或干脆显示为纯色
- 缩放、切 tab、软键盘弹出后，背景短暂偏移或撕裂
- 加了
transform的祖先容器让 fixed 退化为相对该容器固定
用 position: fixed + 独立 <div> 模拟（最稳妥）
核心是把背景图抽离出来，用脱离文档流的层全屏覆盖，并压到内容下方。这个方案在所有主流移动端浏览器中 100% 可控。
立即学习“前端免费学习笔记（深入）”；
HTML 必须把背景层放在 <body> 最外层，和内容同级：
<body> <div class="bg-fixed"></div> <main class="content"></main> </body>
CSS 关键项不能漏：
-
position: fixed是基础，top: 0; left: 0; width: 100vw; height: 100vh确保铺满视口 -
z-index: -1是必须的，否则会盖住所有可点击区域 -
pointer-events: none防止遮挡下方交互 - 若
body设了overflow-x: hidden，记得也加到.bg-fixed上，否则横屏时可能溢出
用 position: sticky 替代（轻量但有约束）
当无法插入额外 DOM 节点，或想减少绝对定位干扰时可用，但它对父容器要求更苛刻：
- 背景层必须是
body的直接子元素 - 不能被任何
transform、perspective、filter或will-change包裹，否则sticky失效 - 确保
body和html没有overflow: hidden类样式 - 若页面有吸顶
header，它的z-index默认 > 0，背景层会被盖住——此时不要调低 header 的 z-index，而是给 header 加background: rgba(255,255,255,0.95)让背景“透出”
真正麻烦的不是写对那行 CSS，而是排查哪一层无意中创建了新包含块——有时候删掉一行 transform，背景就突然“钉住”了。移动端固定背景的本质，是放弃对 background-attachment: fixed 的幻想，转而用层级和定位去模拟视觉效果。
