要让CSS背景图固定不随页面滚动，关键用background-attachment: fixed，但需配合完整背景声明和明确尺寸；失效常见于父容器overflow或transform干扰，移动端Safari常禁用，推荐用position: fixed伪元素模拟。
要让CSS背景图固定不随页面滚动，关键就是用 background-attachment: fixed。但它看似简单，实际容易踩坑——尤其在移动端或嵌套滚动容器里可能失效。
基础写法：确保父元素有高度和背景设置
仅写 background-attachment: fixed 不够，必须配合完整的背景声明，且元素本身要有可渲染的尺寸（不能是 height: auto 且无内容撑开）：
- 给目标元素（如
body或某个section）明确设置height、min-height或内容撑高 - 完整背景属性建议一次性写全：
background: url(./bg.jpg) no-repeat center center / cover fixed; - 避免只写
background-attachment单独一行，以防被其他 background 简写覆盖
常见失效原因：父容器溢出或 transform 干扰
以下情况会导致 fixed 失效，即使代码看起来没错：
-
父级元素设置了
overflow: hidden或scroll：浏览器会创建新的层叠上下文和局部坐标系，fixed就变成相对该容器固定了 -
任意祖先元素用了
transform、perspective或filter：这会触发“包含块变更”，使background-attachment: fixed退化为scroll -
解决方法：检查 DOM 结构，移除不必要的 transform；或把背景移到更外层（如直接设在
body上）
移动端兼容性注意：Safari 和部分安卓浏览器限制
iOS Safari 默认禁用 background-attachment: fixed（出于性能考虑），即使写了也当 scroll 处理：
立即学习“前端免费学习笔记（深入）”；
- 可尝试加
-webkit-background-attachment: fixed（旧版 Safari 需要，但 iOS 15+ 基本无效） - 更可靠方案：改用
position: fixed的伪元素模拟背景图
例如：给容器设position: relative，再用::before绝对定位铺满并设背景图 +z-index: -1
替代方案：伪元素实现真正“视觉固定”效果
当 fixed 不可控时，这个方法兼容性好、行为稳定：
- HTML 不变，CSS 中：
.hero { position: relative; }.hero::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(...) center/cover no-repeat; z-index: -1; } - 注意：若容器不在视口顶部，需动态计算
top值，或改用position: absolute+background-attachment: fixed在 body 上统一控制
基本上就这些。核心是理解 fixed 的“固定”是相对于视口，而任何创建新格式化上下文的操作都会打断它。真要稳，伪元素方案最靠谱。
