bootstrap 5 官方不提供 bg-image 类，背景图需手写 css 媒体查询控制图源、高度与裁剪；伪元素遮罩+text-shadow 提升文字可读性；多值 background-image 实现降级； + object-fit 更可控。
Bootstrap 5 里没有 bg-image 类，别白费劲找
直接说结论：Bootstrap 官方 CSS 中压根不存在 bg-image、backgroundimage 或类似功能类。你看到的任何“一键加背景图”的 class，要么是别人自己写的 CSS，要么是把 bg-primary（纯色背景）和背景图混淆了。img-fluid 只对 <img> 标签生效，对 CSS background-image 完全无效。别在 HTML 里写 <div class="bg-image"> 等它自动适配——它什么都不会做。
<h3>背景图要响应式，必须手写 CSS + 媒体查询</h3>
<p>最轻量、兼容性最好、服务端渲染（SSR）友好的方式，就是纯 CSS 媒体查询覆盖 <code>background-image。关键不是“套 class”，而是控制三件事：图源切换、容器高度、裁剪行为。
- 每个断点换一张图：
background-image: url('bg-mobile.jpg')→@media (min-width: 768px)→ 换成bg-tablet.jpg，避免移动端加载桌面大图 - 必须显式设
min-height: 100vh或具体值，否则容器高度为 0，图根本看不见 -
background-size: cover和background-position: center center必须写死，否则小图重复铺满或拉伸变形 -
background-repeat: no-repeat要显式声明，Bootstrap 不管这个
卡片内背景图文字看不清？用伪元素遮罩+描边
纯白字压深图、黑字压浅图，在小屏上字体变小后立刻糊成一片。不能只调颜色，得靠层叠控制视觉对比度。
- 给卡片加
position: relative，方便后续绝对定位 - 用
::before伪元素叠一层半透明遮罩：content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4) - 文字用
text-shadow: 1px 1px 2px rgba(0,0,0,0.6)做简单描边，比加背景块更轻量 - 避免直接给
.card-title设background，会破坏 Bootstrap 默认间距体系
图片加载失败时空白太突兀，用多值 background-image 降级
CSS 背景图不支持 loading="lazy"，也没 onerror 回调。网络差或路径错，用户看到的就是一块纯色+悬浮文字，体验断裂。
- 用多值语法：
background-image: linear-gradient(135deg, #4b6584, #2c3e50), url("profile.jpg")—— 渐变打底，图加载成功就盖上去 - 如果想彻底规避背景图问题，改用
<img>标签 +object-fit: cover+position: absolute覆盖卡片内容区，更可控也更语义化 -
aspect-ratio: 3 / 4控制卡片宽高比（现代浏览器），旧版 Safari 需补-webkit-aspect-ratio或退化为padding-top技巧
background-position 得按断点手动调——桌面居中好看，手机上可能就把人脸切掉。这点没法自动化，必须真机预览校准。
