background-attachment: fixed 在 Bootstrap 中直接使用无效，必须设在脱离文档流的全屏 wrapper 上（如 position: fixed + z-index: -1），避开 .container/.row 干扰；移动端需用伪元素或降级为 scroll，并注意 Safari 兼容性。
background-attachment: fixed 在 Bootstrap 中失效怎么办
直接加 background-attachment: fixed 通常没用，因为 Bootstrap 的容器（比如 .container 或 .row）有默认的 overflow: hidden 或层叠上下文干扰，导致固定背景被裁剪或滚动跟随。真正起作用的位置必须是**脱离文档流、且父容器不截断背景渲染**的元素。
推荐做法：用 <div> 全屏覆盖 + position: fixed
不要依赖 Bootstrap 的栅格类设置背景图，而是单独创建一个全屏定位层：
<div class="fullscreen-bg" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('bg.jpg') center/cover no-repeat; z-index: -1;"></div>-
z-index: -1确保内容在它上面（否则文字会被盖住） -
background-size: cover比contain更常用，避免留白；若需完全显示图片，改用contain - 别给这个
<div>加.container类，否则会受 Bootstrap 宽度限制 - 如果页面有顶部导航栏（
.navbar），记得给.fullscreen-bg加top: 56px（或对应高度）并设height: calc(100vh - 56px)，否则会遮挡导航
移动端 Safari 固定背景失效的补救
iOS Safari 对 background-attachment: fixed 支持极差，即使用了 position: fixed 层，滑动时也可能出现闪烁或错位。此时只能降级处理：
- 用媒体查询检测 iOS：
@supports (-webkit-overflow-scrolling: touch)或 JS 判断navigator.userAgent.includes('iPhone') - 对 iOS 设备，改用
background-attachment: scroll+background-position: center，并接受它随页面滚动 - 或者用
background-attachment: local（兼容性有限，仅较新 Chrome/Firefox 支持） - 绝对不要指望
transform: translateZ(0)或will-change: transform能修复 iOS 的 fixed 背景问题
和 Bootstrap 4/5 的 .bg-* 工具类冲突吗
冲突。Bootstrap 的 .bg-primary、.bg-opacity-10 等只作用于背景色，不能叠加图片或控制 background-attachment。如果你写：<div class="bg-dark bg-opacity-25"> 再加内联背景图，图片会被纯色覆盖——因为 background 是复合属性，后声明的会覆盖前声明的。
- 要混用半透明遮罩和背景图，必须手写 CSS：
background: rgba(0,0,0,0.3), url('bg.jpg')（注意顺序：遮罩在前，图片在后） - 或者用伪元素：
::before绘制遮罩层，本体只负责背景图，更可控 - Bootstrap 的
.img-fluid对全屏背景无效——那是给<img>标签用的，不是 CSS 背景
实际效果是否“真正固定”，取决于你是否绕过了 Bootstrap 默认的容器限制、是否处理了移动端兼容、以及是否让背景层在正确的渲染层级上。这些细节漏掉任意一个，都会让图片看起来“动来动去”。
