bootstrap 5 不支持 bg-sm-image 等响应式背景图工具类，因其 bg-* 系列仅控制 background-color；实现响应式背景图必须手写媒体查询配合自定义类。
Bootstrap 5 没有 bg-sm-image 这个类，也不存在任何带断点前缀的背景图 utility 类——所有试图用 bg-sm-image、bg-md-bg 或类似写法的尝试，都会静默失败。
为什么 bg-sm-image 不生效
Bootstrap 的 CSS 工具类体系里，bg-* 系列（如 bg-primary）只控制 background-color；它不生成、也不支持 background-image 相关规则。所谓 “sm 前缀” 是社区误传或旧版插件遗留概念，在 Bootstrap 5.3 官方源码中完全不存在 bg-{breakpoint}-image 的定义。
- 浏览器开发者工具里查不到该类的任何 CSS 声明，Computed 面板中
background-image值始终为none - 即使手动在 HTML 中写
class="bg-sm-image"，也不会触发任何样式，CSS 解析器直接忽略未知类名 - 部分构建工具（如 Vite + PostCSS）还会在 production 构建时自动删掉未定义的 utility 类，导致本地能“看到”但线上彻底消失
响应式背景图必须靠媒体查询
要实现不同屏幕尺寸下切换背景图或调整定位，唯一可靠方式是手写媒体查询 + 自定义类。Bootstrap 的 sm/md 断点值（如 576px、768px）可作参考，但不能直接复用为 class 名。
- 路径可差异化：桌面用高清大图，移动端换裁剪后的小图，避免加载浪费
@media (max-width: 576px) { .hero-bg { background-image: url('./img/bg-mobile.jpg'); } } - 定位需分段调优：
background-position: 50% 30%在手机上保人脸，50% 50%在桌面居中 - 慎用
background-attachment: fixed：Safari 移动端不支持，且会触发 iOS 滚动卡顿，建议统一用scroll - 不要依赖
d-none d-sm-block控制背景图显隐——这些类只控制元素 display，对background-image无影响
如何避免类名冲突导致背景图被盖住
常见错误是给容器同时加了 bg-dark 和自定义背景图样式。由于 bg-dark 声明了 background-color: #111，而 CSS 中简写属性 background 会重置全部子属性，图片就被覆盖了。
- 删掉所有
bg-*类，哪怕只是bg-light——它们和background-image天然互斥 - 用更具体的选择器替代
!important：.hero-section { background-image: url(...); }比div { background-image: ... }权重高 - 检查父级是否设了
background：比如body上写了background: #fff，可能通过层叠影响子元素透明度表现 - 用开发者工具的 Computed 面板，直接看最终生效的
background-image值，而不是仅盯 Styles 面板里的声明行
真正麻烦的不是写几行媒体查询，而是图片宽高比和视口比例不匹配时，cover 下关键内容总被裁掉——这时候得换图、微调 background-position，或者接受留白用 contain。别指望一个 class 名解决所有问题。
