移动端 background-attachment: fixed 失效是浏览器主动禁用策略，iOS Safari 早废弃、Android Chrome 84+ 默认忽略；最稳妥方案是用 position: fixed + 独立 div 模拟固定背景。
background-attachment: fixed 在移动端根本不可靠，不是你写错了，是 iOS Safari 和 Android WebView 主动禁用它——别浪费时间调试，直接换方案。
为什么 background-attachment: fixed 在手机上完全失效
这不是兼容性 bug，而是浏览器的明确策略：iOS Safari 从很早开始就废弃该值，Android Chrome 84+ 默认忽略，微信、QQ、安卓原生浏览器等几乎全部跟随。你写上 background-attachment: fixed，DevTools 里样式明明“生效”了，但背景图照常滚动——这是静默降级，控制台不会报错，也查不到原因。
根本原因是它会强制全页面重绘，严重拖慢滚动帧率，尤其在长页面或低端设备上极易卡顿、内存暴涨。即使加 -webkit-background-attachment: fixed 或 transform: translateZ(0) 强行触发硬件加速，支持也极不稳定，且可能引入新层叠上下文导致进一步失效。
用 position: fixed + 独立 div 模拟固定背景（最稳妥）
核心是把背景图从目标元素中抽离，用一个脱离文档流的 <div> 全屏覆盖，并压到内容层下方。这个方案在所有主流移动端浏览器中 100% 可控。
立即学习“前端免费学习笔记（深入）”；
- HTML 必须把背景层放在
<body>最外层，和内容同级：<body> <div class="bg-fixed"></div> <main class="content">...</main> </body>
- CSS 关键项不能漏：
.bg-fixed { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: url('hero.jpg'); background-size: cover; background-position: center; z-index: -1; pointer-events: none; } -
z-index: -1是必须的，否则会盖住所有可点击区域；pointer-events: none防止遮挡下方交互 - 如果页面有吸顶 header，且 header 是
position: fixed，它的z-index默认 > 0，所以背景层仍会被盖住——此时不要调低 header 的 z-index，而是给 header 加background: rgba(255,255,255,0.95)让背景“透出” - 若
<body>设了overflow-x: hidden，记得同步加到.bg-fixed上，否则横屏时可能溢出
用 position: sticky 替代（轻量但有约束）
当页面结构不允许插入额外 DOM 节点，或想减少绝对定位带来的布局干扰时，position: sticky 是次选，但它对父容器要求更苛刻。
- 只适用于背景容器本身是滚动容器直接子元素的场景（比如
<body>下第一层<div>） - 父级不能有
overflow: hidden，否则 sticky 行为被截断 - 必须设
top: 0+ 明确高度（如height: 100vh），否则无法锚定 - 示例：
.bg-fixed { position: sticky; top: 0; height: 100vh; background-image: url('bg.jpg'); background-size: cover; background-position: center; z-index: -1; pointer-events: none; } - 注意：Safari 对 sticky 的实现较旧，iOS 15.4 之前不支持 sticky 在
<body>直接子元素上生效，建议加@supports (position: sticky)做降级兜底
别碰 background-attachment: local，除非你真需要“内容滚动时背景跟着动”
background-attachment: local 常被误当作 fixed 的替代，其实它语义完全不同：背景图会随容器内部内容滚动而滚动，而不是钉在视口上。一旦用错，会出现“文字滚走了，背景还卡在顶部不动”的撕裂感。
- 只在真正需要滚动容器内背景同步移动时才用，比如自定义
textarea或带overflow: auto的卡片 - 对普通
<section>或<body>，local和scroll表现一致，毫无意义 - 移动端同样存在兼容问题，且行为在各浏览器中不一致，不推荐用于全屏背景场景
真正难的从来不是写那一行 background-attachment: fixed，而是得随时判断当前 DOM 结构、父级是否创建了新层叠上下文、目标设备是否允许它按预期渲染——直接用 position: fixed + 独立层，省掉所有不确定性。
