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> 全屏覆盖 + <code>position: fixed

不要依赖 Bootstrap 的栅格类设置背景图，而是单独创建一个全屏定位层：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

<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> 加 <code>.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"> 再加内联背景图，图片会被纯色覆盖——因为 <code>background 是复合属性，后声明的会覆盖前声明的。

• 要混用半透明遮罩和背景图，必须手写 CSS：background: rgba(0,0,0,0.3), url('bg.jpg')（注意顺序：遮罩在前，图片在后）
• 或者用伪元素：::before 绘制遮罩层，本体只负责背景图，更可控
• Bootstrap 的 .img-fluid 对全屏背景无效——那是给 <img> 标签用的，不是 CSS 背景

实际效果是否“真正固定”，取决于你是否绕过了 Bootstrap 默认的容器限制、是否处理了移动端兼容、以及是否让背景层在正确的渲染层级上。这些细节漏掉任意一个，都会让图片看起来“动来动去”。