background-attachment: fixed 失效是因为祖先元素触发层叠上下文，如 transform、overflow: hidden 等会使其锚定从视口退化为该容器；移动端 safari 更保守，常降级为 scroll；可靠替代是用 position: fixed 的独立 div 作背景。
用 background-attachment: fixed 就能实现，但得注意它和 transform、overflow 的隐性冲突。
为什么 background-attachment: fixed 有时失效
常见现象是背景图依然跟着滚动——不是代码写错了，而是父容器触发了层叠上下文或重排布机制。最典型的是给祖先元素加了 transform（哪怕只是 transform: translateZ(0)）、will-change 或 overflow: hidden，这些都会让浏览器创建新的局部坐标系，fixed 就从“视口固定”退化为“该容器内固定”。
- 检查所有上层
div是否有transform、perspective、filter或will-change - 确认滚动容器不是
body而是某个div，且该div设了overflow: auto——此时fixed实际锚定在那个div内部 - 移动端 Safari 对
fixed支持更保守，常自动降级为scroll
background-attachment: fixed 在不同场景下的行为差异
它的“固定”对象取决于渲染上下文：
- 在标准文档流中，且无干扰属性时，锚定在视口（viewport）
- 若元素被包裹在
transform: scale(1)的容器里，锚定在该容器的边界框 - 若页面启用了
contain: paint或content-visibility: auto，fixed可能被忽略或截断 - CSS 容器查询（@container）内部不支持
fixed背景定位
示例：这个会失效
立即学习“前端免费学习笔记（深入）”；
section {
transform: translateX(0);
}
section::before {
background-attachment: fixed;
}
替代方案：当 fixed 不可靠时怎么稳住背景
不用依赖 background-attachment，改用定位 + 层级控制更可控：
- 把背景图抽成独立
<div>，设 <code>position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; - 确保该
div是body直接子元素，避开任何带transform的父容器 - 用
background-size: cover和background-position: center配合，避免拉伸错位 - 如果内容区需要滚动，给内容容器加
position: relative; z-index: 1;确保盖在背景上
真正麻烦的不是写对那行 CSS，而是排查哪一层无意中创建了新包含块——有时候删掉一行 transform，背景就突然“钉住”了。
