background-attachment: fixed 必须配合 background-repeat: no-repeat、background-size: cover/contain 和 background-position: center center 才生效；需设在全屏 wrapper 上，避免用于 bootstrap 容器；ie 和旧 safari 需 @supports 降级；移动端卡顿源于合成限制，模糊主因是图源分辨率不足。
background-attachment: fixed 必须配合 background-size 和 background-position
只写 background-attachment: fixed 不会生效，浏览器会忽略它或渲染异常。常见现象是图片拉伸、偏移、重复平铺，甚至完全不可见。这是因为 fixed 模式下背景图脱离文档流，定位基准变成 viewport，而默认的 background-size: auto 和 background-position: 0 0 会让小图反复平铺、大图只显示左上角。
必须显式设置：
-
background-repeat: no-repeat—— 否则哪怕加了fixed，小图仍会平铺满屏 -
background-size: cover或background-size: contain—— 别用100% 100%，它强制拉伸必然失真 -
background-position: center center—— 比单个center更稳妥，避免 Safari 解析歧义
固定背景必须设在全屏 wrapper 上，别塞进 .container 或 .row
Bootstrap 的 .container 和 .row 是流式布局容器，没有独立定位上下文。把 background-attachment: fixed 直接加在它们上面，背景图会相对于 viewport 定位，而不是你期望的“容器可视区域”，结果就是文字滚动时，背景像钉在屏幕中央不动，和内容明显错位。
正确结构是：
- 外层用一个全高 wrapper：
<div class="hero-fixed"></div> - 给 wrapper 加
min-height: 100vh（或100dvh适配移动端地址栏） - wrapper 内部再嵌套
<div class="container"></div>放内容 - 样式写在 wrapper 上，例如：
.hero-fixed { background: url(...) no-repeat center center / cover fixed; min-height: 100vh; }
IE 和旧版 Safari 会直接忽略 fixed 背景，得有降级方案
IE6–9、iOS Safari 12 之前版本对 background-attachment: fixed 支持极差，部分机型还会禁用硬件加速导致卡顿。不能指望 CSS 自动 fallback。
稳妥做法是用媒体查询兜底：
- 先写正常样式：
.hero-fixed { background-attachment: fixed; } - 再覆盖不支持环境：
@supports not (background-attachment: fixed) { .hero-fixed { background-attachment: scroll; } } - 更细粒度可结合
@media (-webkit-min-device-pixel-ratio: 0)检测 Safari
注意：别在 上同时设 background-color 和 background-image: fixed 却漏掉 background-color 值——IE6 会重复绘制背景图，页面花屏。
移动端滚动卡顿、图片模糊，根源不在 CSS
即使所有样式都对，iOS Safari 上 fixed 背景仍可能卡顿，本质是浏览器对 fixed 层的合成策略限制；而图片模糊则几乎 100% 是图源分辨率不足：一张 1920×1080 的图在 Retina 屏上被拉伸到物理像素渲染，CSS 再怎么调 background-size 也救不回细节。
实际项目中必须配合 HTML 层处理：
- 用
srcset+sizes提供多倍图，或 JS 根据window.devicePixelRatio动态换图 - 避免在 fixed 背景区域叠加过多透明层或 filter，这会触发软件渲染
- 如果只是要“视觉固定”而非真视差，用
position: sticky+top: 0更轻量且兼容性好
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
