.card 背景图不显示主因是高度为0，需设min-height；card-img+card-img-overlay为语义化方案，要求二者均为.card直接子元素；background-image灵活但无访问性，card-img支持alt和SEO；暗色模式下需显式设--bs-card-bg: transparent。
直接用 background-image 给 .card 加背景图，但必须设高度
卡片没显示背景图？八成是 .card 高度为 0。Bootstrap 的 .card 默认不设高度，内容为空、没文字、没图片、也没 min-height 时，背景就“悬空”了，浏览器根本没地方渲染。
解决办法很简单：
- 给
.card加min-height: 200px（或具体数值），别依赖.card-body自动撑开——它的padding不贡献容器高度 - 如果卡片里只有标题和按钮，加个空
也能强制触发高度计算 - 避免在响应式断点中意外清掉高度（比如
h-0或mh-0类）
card-img + card-img-overlay 是语义化方案，但结构约束强
这个组合不是“可选”，而是 Bootstrap 官方推荐的图片底图方案，核心在于语义清晰、定位可控，但对 HTML 结构有硬性要求：
-
card-img必须是.card的**直接子元素**，且建议加width: 100%和object-fit: cover防拉伸 -
card-img-overlay也必须是.card的**直接子元素**，不能嵌套在.card-body里，否则绝对定位会错位 - 它自带
position: absolute和top: 0，但默认没height，靠内部内容撑开；若内容少，得手动加min-height或内边距 - 图片加载失败时，
card-img不会 fallback，需额外加onerror或 CSS::before降级处理
background-image 和 card-img 的关键差异：性能、可访问性、维护成本
选哪种，取决于你更在意什么：
-
background-image：灵活，支持cover/contain/center center精细控制，但无法被屏幕阅读器识别，也不支持右键保存原图；适合装饰性强、非内容型图片（如渐变蒙版、纹理底图） -
card-img：是真实alt、支持懒加载（loading="lazy"）、可被搜索引擎索引；但多一张图就多一次 HTTP 请求，小图可能触发 layout shift - 两者都不兼容 Bootstrap 的
bg-*类——这些类设置的是background-color，会覆盖background-image，而card-img是独立 DOM 元素，完全不冲突
暗色模式下背景图容易失效，--bs-card-bg 变量才是关键
如果你用 background-image + background-color 混合使用，又启用了 Bootstrap 5.3+ 的 data-bs-theme="dark"，大概率发现图片突然“变灰”或背景色盖过图片——因为 --bs-card-bg 变量默认参与渲染，且优先级高于部分 inline style。
正确做法是显式接管变量：
- 写
style="--bs-card-bg: transparent;"在.card上，确保背景图不被变量遮挡 - 如果需要深色模式下换图，得用媒体查询配合
prefers-color-scheme，或者 JS 监听theme变更后切换style.backgroundImage - 别用
bg-dark这类 utility 类叠加图片——它们会写死background-color，且无法通过 CSS 变量动态响应主题
真正难的不是加图，而是让图在不同设备、不同主题、不同加载状态下都“稳住位置、不失语义、不遮文字”。card-img-overlay 看似麻烦，但它把定位、层级、语义全收口在几个 class 里；而 background-image 看似自由，却要把所有边界 case（塌陷、裁切、暗色、缩放）自己兜底。
