background-attachment: fixed 失效主因是父容器触发层叠上下文或 iOS Safari 限制；需配合 height: 100vh、background-position: center center、background-size: cover、background-repeat: no-repeat 才生效，否则退化为 relative 行为。
background-attachment: fixed 在现代浏览器中为什么经常失效
直接写 background-attachment: fixed 却发现背景图还是跟着滚动？不是代码错了，而是它被父容器“劫持”了。只要父级（比如 body 或 html）触发了层叠上下文，fixed 就会退化为 relative 行为。
常见诱因包括：
-
transform: translateZ(0)、will-change: transform—— 删掉，硬件加速不是非加不可 -
filter或backdrop-filter—— 临时注释掉测试是否干扰 -
overflow: hidden+position: relative组合 —— 会创建新的包含块，fixed 变成相对于它，而不是视口 - iOS Safari 默认禁用
background-attachment: fixed（性能策略），不配height: 100vh和-webkit-background-size: cover基本不生效
响应式背景图必须配齐的四个 CSS 属性
单写 background-attachment: fixed 是无效的。它依赖定位、尺寸和重复控制才能真正“钉住”视觉位置。缺一不可：
-
background-position: center center—— 不设的话默认左上角对齐，滚动时偏移感极强 -
background-size: cover—— 小图拉伸失真，大图不缩放就只显示局部；cover是响应式首选（contain会留白，100% 100%强行拉伸变形） -
background-repeat: no-repeat—— 否则平铺后 fixed 完全看不出来效果 -
height: 100vh（至少对body）—— 特别在 iOS 上，没这个声明，fixed 背景大概率被忽略
最小可用组合示例：
立即学习“前端免费学习笔记（深入）”；
body {
margin: 0;
height: 100vh;
background-image: url("bg.jpg");
background-attachment: fixed;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
移动端 fixed 背景不工作时的替代方案
iOS 和部分 Android WebView 对 background-attachment: fixed 支持极差，且无法通过 UA 检测可靠降级。更稳妥的做法是用伪元素模拟：
- 给
body设position: relative - 用
::before插入背景图，设position: fixed+z-index: -1 - 显式设置
top: 0; left: 0; width: 100%; height: 100%; - 加
transform: translateZ(0)触发合成层（仅用于提升渲染稳定性，非必需）
代码片段：
body {
position: relative;
margin: 0;
}
body::before {
content: "";
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url("bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
图片路径和加载性能容易被忽略的细节
背景图路径不是相对于 HTML 文件，而是相对于 CSS 文件所在位置 —— 这点常被内联样式掩盖，一旦抽离成外部 CSS 就出错。
另外，响应式背景图的实际加载体验受以下影响：
- 没加
loading="lazy"？背景图不支持该属性，所以必须靠 CSS 控制：用媒体查询按屏幕宽度切换不同分辨率图（如@media (max-width: 768px)换小图） - WebP 格式支持已成标配，但旧项目若仍用 JPG/PNG，建议优先转 WebP（体积减少 30%+，无兼容问题）
- 避免在首屏关键区域用大图 +
background-attachment: fixed，滚动时重绘开销高，iOS 上易卡顿
真正难的不是写对那几行 CSS，而是判断什么时候不该用 fixed —— 比如内容高度不足一屏、或页面本身有复杂滚动交互时，伪元素方案虽多写几行，反而更可控。
