background-attachment: fixed 在全屏容器中常失效，因其锚定根元素或最近层叠上下文，而非目标元素；可靠方案是直接作用于 html/body 并确保其撑满视口，或用 position: fixed 伪元素兜底。
background-attachment: fixed 在现代浏览器中确实能让背景图随视口固定，但「全屏+固定」组合极易失效——根本原因不是写法错，而是它对父容器的渲染上下文极其敏感。
为什么 background-attachment: fixed 在全屏容器里常失效
该属性实际绑定的是「根元素（html）或最近的具有堆叠上下文的祖先」，而非你写的那个 div。如果你给一个普通 section 设置 background-attachment: fixed，而它没创建新的层叠上下文，浏览器就会向上查找，最终可能落到 body 或 html 上——而 body 默认高度不足、html 未设背景，图就「看不见」。
- 常见错误现象：
background-image显示了，但滚动时跟着动，或直接不显示 - 典型场景：用
height: 100vh做全屏模块，内部设background-attachment: fixed - 关键干扰项：
transform、perspective、will-change、filter等任意一个都会让父元素创建新层叠上下文，导致fixed锚点偏移
真正可靠的全屏固定背景写法
绕过所有中间容器，直接作用于 html 或 body，并确保它们撑满视口且承载背景：
- 必须给
html设height: 100%，否则body的100vh可能无效 -
body要设margin: 0，否则默认外边距会撑出滚动条，破坏「全屏」感 - 背景图统一挂到
body上，避免多层嵌套干扰锚点 - 用
background-size: cover+background-position: center center保证居中覆盖
html {
height: 100%;
}
body {
margin: 0;
height: 100vh;
background-image: url('hero.jpg');
background-attachment: fixed;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
移动端和 Safari 的特殊处理
iOS Safari 和部分安卓 WebView 会忽略 background-attachment: fixed（尤其在非 html/body 上），且滚动时有性能抖动。这不是 bug，是浏览器主动禁用该特性以保流畅。
- 检测方式：滚动时背景是否轻微跳动，或完全随页面滚动
- 务实解法：用媒体查询降级为
scroll，或改用position: fixed的img元素覆盖 - 若坚持用
fixed，需加-webkit-transform: translateZ(0)触发硬件加速（仅对部分旧版 Safari 有效） - 注意：Safari 15.4+ 已支持，但 iOS 15.4 之前设备仍大量存在
替代方案：用伪元素模拟固定背景（兼容性最强）
当 background-attachment: fixed 不可控时，用 ::before 伪元素 + position: fixed 是最稳的兜底：
- 给目标容器设
position: relative - 伪元素设
position: fixed、top: 0、left: 0、width: 100vw、height: 100vh - 用
z-index: -1确保它在内容之下 - 注意：需监听窗口 resize，因为
vw/vh在横竖屏切换时不会自动重绘（iOS Safari 尤其明显）
.hero {
position: relative;
height: 100vh;
}
.hero::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
z-index: -1;
}
真正麻烦的从来不是写一行 background-attachment: fixed，而是它背后那一整套渲染层叠规则和移动端的差异化实现——很多问题直到真机测试才暴露，而那时往往已嵌入复杂布局中难以剥离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
