background-attachment: fixed 失效主因是父级触发层叠上下文（如transform、filter）、容器无明确高度，或iOS/安卓WebView主动禁用；可靠替代方案为伪元素+position: fixed模拟。
直接用 background-attachment: fixed，但必须满足三个硬性条件，缺一不可：有 background-image、容器有明确高度（如 height: 100vh）、父级不能触发新的层叠上下文。
为什么 background-attachment: fixed 没生效？
最常见的失效不是写错了属性，而是被隐式“降级”为 scroll：
- 父元素设置了
transform（哪怕只是transform: translateZ(0)）、will-change: transform或filter，就会创建新层叠上下文，导致fixed失效 - 元素本身没高度——比如只包了文字且没设
height或min-height，背景区域实际为 0，自然看不到“固定”效果 - 在 iOS Safari 或部分安卓 WebView 中，
fixed可能被完全忽略，或滚动时出现回弹抖动 - 误以为
body是安全容器——微信内置浏览器、某些旧版 UC 等会跳过body上的fixed渲染
background-attachment: local 和 scroll 到底差在哪？
三者行为差异极容易混淆，关键看“绑定对象”：
-
scroll（默认）：背景图绑定到元素的盒模型边界。元素整体滚动（比如overflow: scroll的容器被拖动），背景不动；内部子内容滚动，背景也不动 -
local：背景图绑定到元素的「内容区」。只有当元素内部发生滚动（比如长文本溢出+overflow-y: auto），背景才跟着内容滑动——这才是真正“随内容滚”的选项 -
fixed：背景图绑定到视口（viewport）。无论元素怎么滚、内容怎么滚，它都钉在屏幕坐标上
举例：一个高 300px、overflow-y: scroll 的 div 里放了 10 行文字，设 background-attachment: local 后，拖动内部滚动条，背景图会同步位移；设 scroll 则背景纹丝不动。
移动端兼容性差怎么办？用伪元素 fallback
当 fixed 在 Safari 或 WebView 中表现异常时，别硬扛，换方案：
- 不用
background-attachment，改用伪元素 +position: fixed模拟 - 给容器加
::before，设content: ""、position: fixed、top: 0、left: 0、width: 100vw、height: 100vh、z-index: -1 - 背景图设在伪元素上，再用
background-size: cover和background-position: center对齐 - 注意：必须确保容器有
position: relative，否则伪元素的fixed会相对于整个视口定位，可能错位
这个方案绕过了 background-attachment 的渲染限制，但代价是多一层 DOM 节点和更复杂的尺寸对齐逻辑——尤其当容器非全屏、带 margin 或有 sticky 导航时，top/left 偏移要手动算。
真正麻烦的从来不是写对那行 background-attachment: fixed，而是得时刻盯着父级有没有悄悄加 transform，以及要不要为 iOS 用户多写一个伪元素兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
