background-attachment: fixed 在现代浏览器中常因层叠上下文、移动端限制和性能问题失效；推荐用 position: sticky 模拟固定背景，并注意 DOM 结构分离、高度设置与性能优化。
background-attachment: fixed 在多数现代浏览器中确实能让背景图固定，但实际用起来常出现“不动却错位”“移动端失效”“滚动卡顿”这三类问题——不是写法错了，而是它和层叠上下文、transform、缩放行为强耦合。
background-attachment: fixed 失效的常见原因
这个属性看似简单，但一旦父容器触发了新的层叠上下文（比如设置了 opacity、transform、filter、will-change），fixed 就会退化为 scroll。iOS Safari 和部分 Android WebView 还会直接忽略它。
- 检查最近的父级是否加了
transform: translateZ(0)或opacity: 0.99—— 这些都会让 fixed 失效 - 用 Chrome DevTools 的 “Layers” 面板看该元素是否被强制创建了新层叠上下文
- 在 iOS 上，
background-attachment: fixed默认被禁用；必须配合-webkit-background-clip: text等 hack 才可能生效（但不推荐）
替代方案：用 position: sticky 模拟固定背景
当 fixed 不可靠时，更可控的做法是把背景图抽成独立的 <div>，用 position: sticky + top: 0 锚定在视口顶部，再通过 z-index 压在内容下方。
- HTML 结构要分离：背景层和内容层不能是父子关系，否则 sticky 会被父容器截断
- 背景
<div>必须设height: 100vh，且z-index小于内容层 - 注意：sticky 对父容器高度敏感，如果父容器
height: auto，sticky 会退化为 relative
<div class="bg-fixed"></div> <div class="content">...</div>
.bg-fixed {
position: sticky;
top: 0;
height: 100vh;
background-image: url(...);
background-size: cover;
z-index: -1;
}
性能陷阱：fixed 背景在滚动时频繁重绘
浏览器对 background-attachment: fixed 的实现依赖于合成层（compositing layer），但若背景图尺寸过大或用了 background-size: cover + background-position: center，每次滚动都可能触发重采样和重绘，尤其在低端设备上明显卡顿。
立即学习“前端免费学习笔记（深入）”；
- 优先用
background-size: 100% 100%替代cover，避免动态缩放计算 - 图片分辨率控制在 2x 视口宽高以内，超大会吃 GPU 内存
- 加
will-change: transform可能提升合成效率，但别滥用——它本身会强制创建新图层，增加内存开销
真正难的不是写那行 background-attachment: fixed，而是得随时判断当前 DOM 结构、CSS 层叠规则、目标设备的渲染引擎是否允许它按预期工作。很多时候，换种思路比硬刚属性更省事。
