background-attachment: fixed 在移动端静默失效，因iOS Safari和Android Chrome 84+为保滚动性能主动屏蔽；替代方案是用position: fixed的独立div模拟，需注意z-index、overflow及background-size优化。
background-attachment: fixed 能在桌面端实现背景图固定，但**不能直接用于生产环境的跨端项目**——移动端（iOS Safari、Android Chrome 84+）默认禁用它，且不报错、不警告，纯静默失效。
为什么 background-attachment: fixed 在手机上根本不动
这不是你写错了，是浏览器主动屏蔽了它。iOS Safari 从早期版本起就彻底禁用该值对 <body> 和 <html> 的作用；Android Chrome 84 后也默认忽略，除非页面已触发硬件加速（比如加了 transform: translateZ(0)），但这属于不可靠的 hack。
- 现象：DevTools 里样式明明生效，背景图却跟着一起滚
- 原因：固定背景会强制全屏重绘，移动端为保滚动流畅性，直接跳过渲染逻辑
- 兼容性判断不能只看 CanIUse，得实测 iOS 真机 + 主流安卓 WebView
移动端真正能用的替代方案：用 position: fixed 模拟
核心思路是把背景图从元素属性里“摘出来”，放到一个独立的、脱离文档流的 <div> 层里，再用定位撑满视口。
- HTML 必须把
<div class="bg-fixed"></div>放在<body>最外层，不能嵌套在某个 section 或 wrapper 里 - CSS 关键项缺一不可：
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; - 如果页面有
body { overflow-x: hidden }，记得同步加到.bg-fixed上，否则横屏时可能溢出 -
z-index: -1是硬性要求——设成 0 或正数会盖住所有内容，设成-2可能被某些 UA 渲染为不可见
background-size 选 cover 还是 100% 100%？
cover 看起来更“专业”，但它是性能陷阱：每次滚动都可能触发重采样，尤其在低端 Android 设备上卡顿明显。
立即学习“前端免费学习笔记（深入）”；
- 优先用
background-size: 100% 100%，强制拉伸、无缩放计算，GPU 压力小 - 如果必须保持宽高比，用
cover时务必控制图片分辨率——不超过 2x 视口宽高（比如最大 750px × 1334px） - 避免同时用
background-position: center+cover，这会让浏览器在滚动中反复居中裁剪，加剧重绘 - 可加
will-change: transform提升合成效率，但仅限该元素本身，别全局滥用
最麻烦的不是写哪行 CSS，而是得随时判断：当前 DOM 结构是否让 .bg-fixed 被父级 overflow: hidden 截断？有没有其他 fixed 元素（比如 header）的 z-index 把它压死了？这些细节不查渲染树，光看代码根本发现不了。
