background-attachment: fixed 必须配合 background-size、background-position 和 background-repeat 使用，否则易拉伸、偏移或平铺；在 Bootstrap 中需设全屏 wrapper 并加 min-height: 100vh，且注意 IE 和旧版 Safari 兼容性问题。
background-attachment: fixed 是核心，但只设它不够
光写 background-attachment: fixed 不会生效，必须配合 background-size、background-position 和 background-repeat 一起用，否则图片可能拉伸变形、偏移或重复。尤其在 bootstrap 中，容器默认有 padding/margin，或者父元素没设高度，会导致 fixed 背景“看不见”或只显示一小块。
- 必须加
background-repeat: no-repeat，否则 fixed 下图片仍会平铺（尤其小图） - 推荐用
background-size: cover（填满容器且不拉伸）或background-size: contain（完整显示全图，留白）——别用100% 100%，它强制拉伸失真 -
background-position: center center比单个center更明确，避免 Safari 等浏览器解析歧义 - 如果设在
上，记得给html, body { height: 100%; }，否则 fixed 背景只作用于“可视区域高度”，滚动后下半截空白
Bootstrap 容器里设 fixed 背景，要防“被裁剪”
Bootstrap 的 .container、.row 默认是块级流式布局，但 fixed 背景是相对于“初始包含块”（通常是 viewport）定位的，不是父容器。所以如果你把背景样式加在 <div class="container bg-fixed"> 上，图片会固定在整个屏幕中央，而内容滚动时，看起来就像背景“跑偏”了——实际是它根本没跟着容器走。
<ul>
<li>正确做法：把 fixed 背景设在全屏高度的 wrapper 上，比如 <code><div class="hero-section bg-fixed"><div class="container">...</div></div>
min-height: 100vh，不然 fixed 背景只渲染视口那么高，内容长了下面就是纯色底.row 或 .col 上直接加 fixed 背景——它们没有独立定位上下文，容易触发渲染 bug（尤其在 iOS Safari）IE 和旧版 Safari 对 fixed 背景支持差，得有降级方案
background-attachment: fixed 在 IE6–9、iOS Safari
- 简单降级：用媒体查询检测不支持环境，改用
scroll+background-size: cover，至少保证图片自适应 - 更稳方案：用 JS 检测
matchMedia('(prefers-reduced-motion)')或监听scroll手动模拟视差（但别为这点效果加整个视差库） - 千万别在
上同时设background-color和background-image: fixed却不加background-color——IE6 会重复渲染背景图，页面花屏
和 Bootstrap 5.3 渐变叠加一起用时，顺序和层级很关键
Bootstrap 5.3 支持 bg-gradient 类，常和 fixed 背景叠在一起做“图+色”英雄区。但 CSS 的层叠顺序是：渐变在前，图片在后（除非你用 background-image: linear-gradient(...), url(...) 显式声明）。如果顺序反了，渐变会盖住图片。
- 正确写法：
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('hero.jpg'); - 必须给两个图层都配
background-attachment: fixed，否则只有第一个生效，第二个还是随内容滚 - 注意
z-index没用——background 是绘制层，不是堆叠上下文，别试图用它调顺序
