background-attachment: fixed 在 ios safari 和部分安卓 webview 中完全失效，且在有 transform 或 will-change 的父容器里会被静默忽略；移动端必须用伪元素替代，即通过 body::before 创建固定图层并设 z-index: -1 和 pointer-events: none。
直接用 background-attachment: fixed 就能实现，但别急着写死——它在 iOS Safari 和部分安卓 WebView 中完全失效，且在有 transform 或 will-change 的父容器里会被静默忽略。
为什么 background-attachment: fixed 有时没反应
这不是你代码写错了，而是浏览器主动“不执行”。常见触发条件包括：
-
body或其祖先元素设置了transform: translateZ(0)、perspective或will-change: transform—— Chrome 会直接禁用fixed背景 - 页面启用了横向滚动（比如
overflow-x: auto），某些版本 Safari 会连带废掉fixed行为 - 目标元素不是
body，而是普通div，且该div没有overflow: hidden或高度约束，fixed就被当作无效值处理 - iOS 所有版本的 Safari（含 WKWebView）原生不支持
background-attachment: fixed，无论写在哪都无效
移动端必须用伪元素替代 background-attachment: fixed
这是目前最稳定、兼容性最好的 fallback 方案，本质是用 ::before 创建一个覆盖全屏的固定图层：
body {
margin: 0;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -1;
pointer-events: none;
}
关键点：
- 必须清除
body默认margin，否则fixed元素会错位一像素 -
z-index: -1是为了确保内容层自然盖在背景上，不用额外设z-index -
pointer-events: none防止伪元素拦截所有点击和滚动事件 - 如果页面支持横滚，需加
background-attachment: local或监听scroll动态修正位置（但多数场景不需要）
别混淆 background-attachment: local 和 fixed
local 不是“本地化”，而是“随局部内容滚动”——它会让背景图跟着容器内可滚动区域一起动。例如：
- 一个
div设置了overflow-y: scroll，里面文字滚动时，background-attachment: local的背景也会跟着文字滑上去 - 这和“背景不动”的需求完全相反，选错就等于白调
-
scroll是默认值，背景随容器滚动；fixed是目标值，但受限多；local是冷门选项，只在极少数滚动容器内需要背景联动时才用
真正难的不是写对那行 CSS，而是判断当前环境是否允许它生效——iOS 上写十遍 fixed 都没用，得切到伪元素方案；Chrome 里加了个 transform 就失效，得查祖先样式树。这些细节不验证，上线后用户看到的就是一张“会动的背景图”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
