Bootstrap 5 不提供 bg-cover 类，需手动设置 background-size: cover、background-position: center center 和 background-repeat: no-repeat，并确保容器有 min-height: 100vh 等可控高度，同时注意路径、CORS、样式覆盖等问题。
Bootstrap 5 没有 bg-cover 这个内置 class
直接写 class="bg-cover" 不会生效——Bootstrap 官方 CSS 中压根不存在这个 utility 类。所有试图靠加一个 class 就让背景图“自动 cover”的想法，都会在浏览器里静默失败。它只提供 bg-primary、bg-dark 这类纯色背景工具，不封装 background-image 相关逻辑。
background-size: cover 必须手动写，且要配齐三要素
只写 background-size: cover 不够，常见现象是图片居左上角、只显示一小块，或仍被拉伸。真正起效需同时声明：
-
background-size: cover（等比缩放填满） -
background-position: center center（确保裁剪中心对准视觉焦点） -
background-repeat: no-repeat（禁用平铺，虽 cover 默认已禁用，但显式写更稳妥）
漏掉 background-position 是手机端人脸/文字被裁掉的主因；漏掉 background-repeat 在某些旧版 Safari 下可能意外触发平铺。
容器高度必须可控，否则 cover 无处可盖
给 .container-fluid 或 .row 直接加背景图，大概率只看到顶部一条细缝——因为这些类默认高度由内容撑开，不是视口高度。解决路径很明确：
- 设
min-height: 100vh（推荐），比height: 100vh更容错，防内容少时塌陷 - 移动端优先用
min-height: 100dvh（2026 年主流浏览器已支持），避免 Safari 地址栏显隐导致高度跳变 - 别依赖
html, body { height: 100% }，它在嵌套布局中易失效，不如直接作用于目标容器 - 若容器带
border-radius，加background-origin: border-box，否则圆角区域背景定位偏移，像被切了一角
路径、跨域和层级问题比代码本身更容易出错
控制台没报错，但背景就是不显示？八成卡在这几个地方：
- 图片路径用相对路径时，检查是否相对于当前 CSS 文件位置（不是 HTML），上线后常见 404
- CND 图片未开启 CORS，Chrome 控制台报
Cross-Origin Resource Sharing (CORS) policy错误，背景留白 - Bootstrap 的
.bg-*类（如.bg-light）设置了background-color，会覆盖你的background-image，必须单独定义 class，别叠加使用 - 父容器设了
overflow: hidden但子元素用了background-attachment: fixed，在 iOS 上直接失效，建议降级为scroll
最常被忽略的是：你写的 CSS 规则被其他更高优先级样式覆盖了，比如某个第三方组件或 Bootstrap 自带的 .card 内部重置了 background 属性。打开开发者工具，逐层看 computed styles 里的 background-image 是否真的应用到了目标元素上。
