background-attachment: fixed 在移动端失效是浏览器策略所致，iOS Safari 自6版起废弃，安卓也基本禁用；推荐用 position: sticky 模拟，需确保父容器无 overflow: hidden。
background-attachment: fixed 在桌面端有效，但在 iOS Safari 和绝大多数安卓 WebView 中已被主动禁用——这不是你写错了，是浏览器策略使然。
为什么 background-attachment: fixed 在手机上失效
iOS 从 Safari 6（2012 年）起就废弃了该行为，安卓系统也基本跟随。原因很实际：固定背景会强制浏览器在每次滚动时重绘整个视口背景层，导致卡顿、高内存占用，尤其在低端设备上明显。
- 即使加上
-webkit-background-attachment: fixed也没用 - 某些 Android Chrome 版本“看似支持”，实则依赖极苛刻条件（如父容器必须有
transform: translateZ(0)且开启硬件加速） - 错误现象典型：桌面预览正常，真机一滑，背景图跟着内容一起滚——这不是 bug，是标准行为
用 position: sticky 模拟固定背景（推荐方案）
这是目前兼容性最好、性能可控、无需 JS 的纯 CSS 替代方式，适用于全屏头图、品牌首屏等场景。
- 新建一个独立
<div class="bg-fixed"></div>，放在内容层之前 -
.bg-fixed设position: sticky; top: 0; height: 100vh; z-index: -1; - 必须确保其父容器没有
overflow: hidden，否则 sticky 行为会被截断 - 背景图用
background-size: cover; background-position: center;防止拉伸或偏移
.bg-fixed {
position: sticky;
top: 0;
height: 100vh;
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
z-index: -1;
}
.content {
position: relative;
}
用 position: fixed + z-index: -1 的边界情况
当页面结构简单、无复杂层级或滚动容器嵌套时，这个方案最直接，但风险点集中：
立即学习“前端免费学习笔记（深入）”；
-
fixed元素脱离文档流，需手动设width: 100vw; height: 100vh; -
z-index: -1是关键，否则会遮挡所有交互元素；但部分旧版安卓浏览器对负 z-index 渲染异常 - 若页面有横向滚动（比如 overflow-x: auto 的宽表格），
fixed背景会随 viewport 固定，可能在横滑时露出空白 - 不建议直接设在
body上——某些浏览器（如微信内置浏览器）会忽略body的fixed背景渲染
真正难的不是写几行 CSS，而是判断什么时候该用 sticky、什么时候得上 requestAnimationFrame 节流的 JS 方案——比如要配合视差滚动或动态缩放时，sticky 就不够用了。
