background-attachment: fixed 单独使用无效，必须配合 background-repeat: no-repeat、background-size: cover/contain 和 background-position: center center 才能正常生效；否则会出现拉伸、偏移、平铺或消失等问题，因其定位基准变为 viewport，需显式控制尺寸与位置。
background-attachment: fixed 能让背景图固定，但只写这一条根本没用——浏览器会直接忽略或渲染异常，必须搭配 background-repeat、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 解析歧义
为什么设在 .container 或 .row 上会错位
Bootstrap 的 .container 和 .row 是流式布局容器，没有独立定位上下文。把 background-attachment: fixed 直接加在它们上面，背景图会相对于 viewport 定位，而不是你期望的“容器可视区域”，结果就是文字滚动时，背景像钉在屏幕中央不动，和内容明显错位。
- 正确结构是外层用一个全高 wrapper：
<div class="hero-fixed"><div class="container"></div></div> - 给 wrapper 加
min-height: 100vh（或100dvh适配移动端地址栏） - 样式写在 wrapper 上，例如：
.hero-fixed { background: url(...) no-repeat center center / cover fixed; min-height: 100vh; }
移动端卡顿和 IE/Safari 兼容性怎么处理
移动端卡顿主因是合成限制，不是 CSS 写错了；IE6–9 和旧版 iOS Safari 会直接忽略 fixed 背景，得有降级方案。
- 别指望
@supports (background-attachment: fixed)在旧 Safari 上可靠，它常返回 false 正确结果 - 更稳做法：用媒体查询 +
prefers-reduced-motion检测，或 JS 判断matchMedia('(prefers-reduced-motion: reduce)')后改用background-attachment: scroll+background-size: cover - 千万别在
上同时设background-color和background-image: fixed却不加background-color—— IE6 会重复渲染背景图，页面花屏
最容易被忽略的是 wrapper 高度和父元素 overflow 设置：如果 wrapper 没设 min-height，或者祖先元素有 overflow: hidden，背景图就会被裁掉或压根不显示——这不是 fixed 失效，而是它根本没地方画。
