background-attachment: fixed 失效主因是父容器触发层叠上下文（如transform、filter）或iOS Safari/Android WebView主动禁用；需搭配background-repeat: no-repeat、显式background-position和background-size: cover，并优先用伪元素+position: fixed替代。
background-attachment: fixed 为什么有时失效
直接加 background-attachment: fixed 却发现背景图还是跟着滚动？大概率是父容器触发了新的层叠上下文或设置了 transform、will-change、perspective 等 CSS 属性——这些会让浏览器强制启用合成层，从而“劫持”fixed 行为，使背景图退化为 relative 效果。
常见踩坑点：
-
body或html上写了transform: translateZ(0)（为硬件加速加的）→ 删掉 - 用了
backdrop-filter或filter→ 暂时移除测试是否干扰 - 父级设置了
overflow: hidden+position: relative→ 检查是否意外创建了包含块 - 在 iOS Safari 上，
fixed背景默认被禁用（出于性能考虑），必须配合-webkit-background-size: cover和显式声明height: 100vh才可能生效
background-image 固定写法要配全哪些属性
单写 background-attachment: fixed 不够。它依赖背景定位和尺寸控制才能真正“钉住”视觉位置。缺一不可：
- 必须设置
background-position（如center center），否则默认左上角对齐，滚动后偏移明显 - 必须设
background-size: cover或contain，否则小图重复铺满，fixed 也看不出效果 - 推荐加
background-repeat: no-repeat，避免意外平铺干扰“固定感” -
background-origin和background-clip保持默认即可，改了反而容易错位
完整最小可用示例：
body {
background-image: url("bg.jpg");
background-attachment: fixed;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
body 和 html 都设 background 有什么区别
绝大多数情况下只该在 body 上设背景。如果同时给 html 设了背景图，且 body 内容高度不足一屏，就会出现“底部露底”——因为 html 的背景会从整个文档根开始渲染，而 body 默认有 margin，导致错位。
更稳妥的做法：
- 清除
body默认外边距：body { margin: 0; } - 确保
html和body高度撑满视口：html, body { height: 100%; } - 背景只写在
body上；若需全窗口覆盖（比如加载页），才考虑用:before伪元素绝对定位盖一层
移动端 fixed 背景不工作怎么办
iOS Safari 对 background-attachment: fixed 支持极差，Android Chrome 65+ 基本可用，但仍有兼容风险。真要保底，得换思路：
- 放弃 CSS fixed，改用 JS 监听
scroll，动态修改background-position的 y 值（值 = -scrollTop * 0.5），模拟视差效果 - 或者直接用
position: fixed+z-index叠一层object-fit: cover，再用pointer-events: none防止遮挡交互 - 最省事：接受降级，在
@supports not (background-attachment: fixed)里回退为scroll，并确保图片尺寸足够大
别指望一行 CSS 在所有设备上都“真正固定”。能稳定工作的，往往是放弃 fixed，转而控制视觉感知。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
