结论：background-attachment: fixed 实现视差仅对背景图生效，须确保盒子无局部滚动（overflow ≠ auto/scroll）、未创建新层叠上下文、在 iOS Safari 中需加 -webkit-transform: translateZ(0)，且高度≥100vh、background-size 为 cover/contain、background-position 显式声明。
直接说结论：用 background-attachment: fixed 实现盒子视差，只对背景图生效，且必须确保该盒子本身不触发局部滚动（比如 overflow: auto），否则背景会随盒子内容滚动而“失效”。
为什么 background-attachment: fixed 在某些盒子上没反应？
常见错误是把 background-attachment: fixed 写在有局部滚动的容器里（如带 overflow-y: scroll 的侧边栏或卡片），此时浏览器按规范将 fixed 解释为“相对于该容器视口固定”，而非整个页面视口——结果就是背景跟着容器一起滚，毫无视差感。
- 必须确认目标盒子的
overflow是visible或未设置（默认值） - 父级不能有
transform、perspective、filter等创建新层叠上下文的属性，否则fixed会降级为scroll - 在 iOS Safari 上，
background-attachment: fixed默认被禁用，需加-webkit-transform: translateZ(0)强制启用硬件加速（但仅部分机型有效）
background-attachment: fixed 的最小可用结构
不是随便一个 div 加了 background-attachment: fixed 就能出效果。它依赖高度撑开和视口锚定关系：
- 盒子高度至少要 ≥ 视口高度（常用
height: 100vh） - 背景图必须设
background-size: cover或contain，否则拉伸错位 - 必须显式声明
background-position（如center center），否则不同浏览器初始偏移不一致 - 避免用
background: url(...) fixed简写——CSS 解析时可能忽略fixed，建议拆成独立属性
正确写法示例：
.parallax-box {
height: 100vh;
background-image: url("bg.jpg");
background-attachment: fixed;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
与 transform: translateZ 的关键区别在哪？
background-attachment: fixed 是纯 CSS 声明式控制，不改变 DOM 结构或层级，但只能驱动背景图；transform: translateZ() 需要手动构建 3D 层级（perspective + 多个子 div + 不同 translateZ 值），能实现前景/中景/背景多层异步滚动，但对 HTML 结构强约束（所有内容必须包在 div 里），且在低性能设备上易掉帧。
立即学习“前端免费学习笔记（深入）”；
- 如果你只要“背景不动、内容动”的两层效果，
background-attachment: fixed更轻量、兼容性更好（IE9+） - 如果要模拟真实纵深（比如文字浮在云层前、山峦在后缓慢移动），必须用
transform: translateZ()方案 - 二者不能混用在一个盒子上——
transform会破坏fixed的锚定行为
最容易被忽略的一点：视差效果是否成立，不取决于你写了多少行 CSS，而取决于滚动容器是否真正是 document.scrollingElement。任何嵌套滚动（如 iframe、position: fixed 导航栏下的内容区）都会让 background-attachment: fixed 失去预期锚点。
