Bootstrap 5 不提供背景图工具类，所有 .bg-* 类仅设置 background-color 并覆盖 background-image；需自定义 CSS 并确保 background-size、background-position、background-repeat 三者齐全，且容器有明确高度。
Bootstrap 5 没有 background-image 工具类，别白找 .bg-image 或 .bg-url
Bootstrap 5 官方 CSS 中压根不存在任何用于设置背景图的 utility class。所有 .bg-* 类（比如 .bg-dark、.bg-light）只写入 background-color，且会覆盖你手动写的 background-image —— 不是叠加，是直接“盖掉”。浏览器计算后，background 最终值常为 rgb(33, 37, 41) none repeat scroll 0% 0%，图片字段被清空。
常见错误现象：
- 写了
class="bg-dark" style="background-image: url(…)"，但图不显示 - 用开发者工具看 Computed 面板，
background-image显示为none - 删掉
.bg-dark立刻出现图片 → 确认是类冲突
实操建议：
- 彻底移除所有
.bg-*类，哪怕只是.bg-white - 用独立 class（如
.hero-bg）配合自定义 CSS，选择器权重更高 - 避免在父容器（如
body）上误加.bg-*，它可能通过层叠影响子元素
扩展背景图能力必须手写 CSS，关键三行不能少
要让背景图真正生效，尤其在全屏或响应式场景下，光写 background-image 远不够。下面这三行是高频遗漏点，缺一不可：
-
background-size: cover（或contain/100% 100%，按需选） -
background-position: center center（显式声明，防被重置） -
background-repeat: no-repeat（否则小图在缩放临界点可能意外平铺）
另外两个隐藏前提：
-
html, body { height: 100%; }—— 否则min-height: 100vh在嵌套中可能失效 - 目标容器必须有明确高度，比如
min-height: 100vh，而不是靠内容撑开
示例（安全写法）：
.hero-section {
background-image: url(/img/hero.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 100vh;
}
用 background-size: 100% 100% 拉伸时，形变是设计行为，不是 bug
如果搜索的是“拉伸填满”，那 background-size: 100% 100% 是唯一正解。但它和 cover 逻辑完全不同：前者放弃宽高比，强制拉伸到容器宽高；后者等比缩放并裁剪。
适用场景很窄：
- 抽象纹理、渐变底图、纯色海报式首屏
- 允许人像/文字失真的运营 Banner（需提前确认设计接受度）
不适用场景：
- 含 Logo 或标语的 Banner —— 拉伸后关键信息变形、模糊
- 需要跨设备保持视觉一致的正式页面
注意：若容器没设宽高（比如普通 <div>），<code>100% 100% 会退化为无效；务必同步配 width: 100%; height: 100vh; 或类似约束。
移动端 Safari 和高 DPI 屏幕最容易暴露配置盲区
PC 浏览器看着正常，一上真机就出问题——这是背景图最典型的“上线翻车”路径。核心卡点在三处：
-
background-attachment: fixed在 iOS Safari 几乎必失效，还可能触发渲染卡顿，直接禁用 - 高 DPI 屏（如 MacBook Retina、安卓旗舰）下，小图会模糊，建议用 WebP + 2x 尺寸图，或用
image-set()降级 - 某些安卓 WebView 或旧版 UC 浏览器不支持
cover，可加回退：background-size: 100% 100%; background-size: cover;（后者覆盖前者）
真正容易被忽略的细节是文字可读性：背景图暗，文字也暗，此时不该只调 color，而应加半透遮罩层：background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(...);。这样既保图，又稳文字对比度。
