Bootstrap 5 提供 .bg-cover、.bg-contain、.bg-auto 类快速设置 background-size，但不提供 background-position 工具类，需手写 CSS；背景图显示问题多因容器无高度、路径错误或误用于 img 标签。
background-image 用法本身与 Bootstrap 无关
Bootstrap 不提供专门控制 background-image 显示比例和偏移的独立类名。它只是 CSS 框架，所有背景图行为由原生 CSS 的 background-size、background-position 等属性决定。你写的类，哪怕叫 .bg-cover，本质仍是覆盖或补充这些 CSS 属性。
如何用 Bootstrap 类快速设置 background-size
Bootstrap 5 内置了几个常用背景尺寸工具类，直接作用于 background-size：
-
.bg-cover→ 对应background-size: cover（缩放填满容器，可能裁剪） -
.bg-contain→ 对应background-size: contain（完整显示图片，留白可能较多） -
.bg-auto→ 对应background-size: auto（原始尺寸，不缩放）
注意：这些类只设 background-size，不设 background-position 或 background-repeat，默认仍为 center center 和 no-repeat —— 所以多数情况下已够用。
需要精确偏移时必须手写 CSS
Bootstrap 没有类似 .bg-pos-20-30 这样的位置工具类。要微调偏移，只能自己加内联样式或自定义类：
- 常见偏移写法：
style="background-position: 20% 30%;"或style="background-position: left 10px top 20px;" - 若需复用，建议定义 SCSS 变量或轻量工具类，例如：
.bg-pos-left-top { background-position: left top; }<br>.bg-pos-center-bottom { background-position: center bottom; } - 避免用
!important覆盖 Bootstrap 默认值；优先用更具体的选择器或直接在元素上写style
容易被忽略的 display 和 background-attachment 问题
背景图“不显示”或“错位”，常不是尺寸/位置问题，而是容器本身没尺寸或没渲染：
- 确保父容器有明确高度（比如
height: 400px或min-height: 100vh），否则background-image无处可画 - 不要对
img标签设background-image—— 它是内容元素，不是容器；应套一层div并设背景 -
background-attachment: fixed在移动端常失效或触发性能问题，慎用；如需视差效果，优先考虑position: sticky或第三方库
真正卡住人的，往往是容器没高、图片路径 404、或者把背景图错加在了 <img> 上。
