background-attachment: fixed 失效主因是父容器设置了 transform、perspective、will-change 或 filter，导致其降级为 scroll 行为；ios safari 中还受原生滚动限制，常表现为粘滞或跳帧。
background-attachment: fixed 在滚动时失效的常见原因
直接说结论：background-attachment: fixed 在大多数现代浏览器里确实能让背景图随视口固定，但**一旦父容器设置了 transform、perspective、will-change 或 filter，它就会降级为 scroll 行为**——这不是 bug，是规范强制要求。你看到背景跟着元素一起滚，八成是这个原因。
- 检查父级是否写了
transform: translateZ(0)或opacity: 0.99这类“触发硬件加速”的 hack，它们会创建新的层叠上下文，导致fixed失效 -
position: fixed元素内部的background-attachment: fixed本身无意义（背景已相对于视口固定） - 在 iOS Safari 上，即使没上述属性，
fixed背景也可能在页面滚动时卡顿或跳帧，这是渲染机制限制，不是 CSS 写错了
替代方案：用伪元素 + position: fixed 模拟
当 background-attachment: fixed 不可用时，最可靠的方式是把背景图抽出来，用 ::before 伪元素 + position: fixed 手动对齐。关键在于计算偏移，让伪元素视觉上“贴”在目标元素位置。
- 给目标元素设
position: relative - 用
::before创建绝对定位图层，再通过transform: translateZ(0)强制提升为合成层（提升滚动性能） - 伪元素的
top/left需要和目标元素的getBoundingClientRect()结果一致，但注意：滚动时需监听scroll事件动态更新，否则会错位 - 更轻量的做法是直接设
position: fixed并用calc()配合vh/vw做近似定位，适合背景图尺寸固定、容器位置不随内容流大幅变动的场景
div.hero::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url(bg.jpg);
background-size: cover;
z-index: -1;
}
background-attachment: local 的真实用途
local 不是“本地文件路径”，而是指背景图随**元素内容滚动而滚动**——常被误认为没用，其实它在可滚动容器里很关键。
- 当一个
div设了overflow: auto，又希望背景图像“衬底”一样随文字一起动（比如带纹理的文本框），就得用background-attachment: local - 它和
scroll的区别在于：如果元素有内边距，local会让背景图从内边距区域开始滚动；scroll则始终固定在 border box 左上角 - 注意：
local在 Firefox 中支持较晚（v57+），旧版本会退化为scroll，别依赖它做核心布局
移动端适配中必须绕开的坑
iOS Safari 对 background-attachment: fixed 的处理尤其保守：只要页面启用了原生滚动（即没用 overscroll-behavior: contain 或第三方滚动库接管），背景图大概率不会真正固定，而是“粘滞式滚动”——看起来像固定，实则滞后、撕裂、甚至白屏。
- 不要指望
fixed在 iOS 上实现精准视差效果；用requestAnimationFrame+scrollTop手动控制背景background-position更可控 - 避免在
body或html上直接设background-attachment: fixed，iOS 会直接忽略 - 如果必须用，加一行
-webkit-transform: translateZ(0)到 body 可能唤醒部分机型的支持，但不保证，且可能引发其他渲染问题
真正难的不是写对那行 CSS，而是判断当前滚动容器是否受系统原生行为约束、是否有合成层干扰、以及要不要为 iOS 单独切一套降级逻辑——这些没法靠查文档解决，得真机反复测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
