background-attachment: fixed在移动端根本不会生效，是ios safari和安卓webview主动禁用；应改用::before伪元素+position: fixed方案，需设四边为0、z-index: -1、pointer-events: none，并避免overflow: hidden等干扰。
background-attachment: fixed 在移动端根本不会生效——不是你写错了，是 iOS Safari 从初版起就明确不支持，Android Chrome 84+ 及微信、QQ 等 WebView 也全部主动禁用。它被浏览器静默降级为 scroll，DevTools 里样式明明“亮着”，但背景图照常滚动。
background-attachment: fixed 失效的典型现象
- 页面一滚动，背景图立刻跟着动，毫无视差感
- 横竖屏切换后背景偏移、拉伸或闪一下
- Safari 开发者工具里检查，
background-attachment值显示为fixed，但渲染层根本没有创建对应图层（Layers 面板里看不到） - 加了
-webkit-background-attachment: fixed或transform: translateZ(0)也没用，还可能触发意外层叠上下文
这些都不是 bug，而是浏览器为保滚动性能和内存稳定做的主动策略。
用 ::before 伪元素 + position: fixed 替代（最稳）
这是目前兼容性最好、无需 JS、能覆盖 iOS 15+ 和安卓主流 WebView 的方案。
-
::before必须有content: ""，否则不渲染 - 必须设
top: 0; right: 0; bottom: 0; left: 0;，只写width: 100%; height: 100vh在 iOS 上容易错位 -
z-index: -1是必须的，否则遮挡所有点击和滚动 - 加
pointer-events: none，避免拦截下方内容交互 - 背景图建议用
background-size: cover; background-position: center center配合，横竖屏切换更稳 - 父容器不能有
overflow: hidden、contain: paint或content-visibility: auto，否则伪元素会被裁切或失效
示例：
.hero {
position: relative;
}
.hero::before {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
z-index: -1;
pointer-events: none;
}
为什么不能直接给 body 或 html 设 background-attachment: fixed
- iOS Safari 对根元素的
background-attachment: fixed完全不实现，连 fallback 渲染逻辑都不走 - Android Chrome 即使在某些条件下“偶现”生效（比如加了
will-change: transform），也会导致滚动卡顿、内存暴涨，尤其在长页面中 -
CSS.supports('background-attachment', 'fixed')在 iOS 上返回true，但实际无效——这是假阳性，不能用于兼容判断
真正难的不是写出那几行 CSS，而是接受：移动端没有“固定背景”这个原生能力，只有“模拟固定”的工程权衡。而伪元素 + position: fixed 是当前最可控、最容易调试、也最不容易被未来版本突然破坏的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
