background-attachment: fixed 在 iOS Safari 中完全失效，Chrome 遇 transform 或 will-change 会静默禁用，overflow: hidden 容器中行为不稳定；需 body 满足 margin:0、min-height:100vh、background-size:cover、background-position:center center、background-repeat:no-repeat 五条件；兼容性要求高时应改用 body::before 伪元素模拟，设 position:fixed + z-index:-1 + pointer-events:none。
background-attachment: fixed 能实现背景图随视口固定、不随滚动移动的效果，但不能无脑用——它在 iOS Safari 中完全失效，Chrome 遇到 transform 或 will-change 会静默禁用，且在有 overflow: hidden 的容器里行为不稳定。
为什么 background-attachment: fixed 在移动端经常失灵
这不是你代码写错了，而是浏览器策略限制：
- iOS Safari（所有版本）彻底不支持
background-attachment: fixed，无论用在body还是其他元素上 - Android WebView 和部分安卓 Chrome 会降级为
scroll行为，不报错也不提示 - 只要父容器设置了
transform: translateZ(0)、perspective或will-change: transform，Chrome 就会强制忽略fixed值 -
background-attachment: fixed实际绑定的是“包含块”，而overflow: hidden或scroll的容器会创建新包含块，导致它固定在容器内而非视口
正确写法：body 上必须配齐这 5 个条件
仅写 background-attachment: fixed 不够，缺一不可：
-
margin: 0—— 清除body默认外边距，否则伪元素或 fixed 背景会错位 -
min-height: 100vh—— 用vh而非100%，避免因父容器高度未定义导致背景只覆盖部分内容 -
background-size: cover—— 否则小图会被拉伸变形，大图可能只显示一角 -
background-position: center center—— 居中是视觉稳定的底线，尤其配合cover时 -
background-repeat: no-repeat—— 防止图片平铺干扰“固定”感知
完整示例：
body {<br> margin: 0;<br> min-height: 100vh;<br> background-image: url('bg.jpg');<br> background-size: cover;<br> background-position: center center;<br> background-repeat: no-repeat;<br> background-attachment: fixed;<br>}
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
替代方案：用 ::before 伪元素模拟 fixed 效果
当兼容性是硬需求（比如要上生产环境），必须放弃 background-attachment: fixed，改用伪元素：
- 给
body::before设置position: fixed，并用z-index: -1确保内容层在它上面 - 必须加
pointer-events: none，否则伪元素会拦截所有点击、滚动事件 - 如果页面存在横向滚动，需额外加
background-attachment: local或监听scroll动态修正位置（代价高，慎用） - 注意：伪元素方案在
body有transform时仍可能偏移，此时应把伪元素挂到html上
简写示例：
body { margin: 0; }<br>body::before {<br> content: '';<br> position: fixed;<br> top: 0; left: 0;<br> width: 100%; height: 100%;<br> background: url('bg.jpg') center/cover no-repeat;<br> z-index: -1;<br> pointer-events: none;<br>}
别混淆 background-attachment: local 的用途
local 不是 fixed 的备选，它干的是相反的事：
-
scroll（默认）：背景图随整个页面滚动 -
fixed：背景图相对于视口固定（目标效果，但兼容差） -
local：背景图随元素内部可滚动内容一起动——比如一个div设了overflow: auto，里面文字滚动时，背景也跟着滚
想让背景“不动”，就别碰 local；它只在极少数需要局部滚动同步背景的 UI 场景中才有意义，比如聊天窗口里消息气泡带纹理背景。
真正难的不是写对那行 background-attachment: fixed，而是判断当前项目是否能承受它在 iOS 上彻底白屏的风险。一旦涉及微信、钉钉、企业微信等内嵌 WebView，伪元素方案几乎是唯一可靠路径。
