Bootstrap推荐用card-img+card-img-overlay实现语义化图片背景叠加，而非background-image；card-img需设width:100%和object-fit:cover，card-img-overlay必须为.card直接子元素且自带绝对定位；card-img-top会占文档流，card-img不占流更适合作底图；需处理图片加载失败降级及无障碍访问。
用 card-img-overlay 实现图片背景叠加
Bootstrap 卡片的图片背景叠加，核心就是让图片作为容器底图、文字内容浮在上面——不是靠 CSS 自己硬写 position: absolute，而是直接用 Bootstrap 提供的语义化类名 card-img-overlay。
这个类名必须和 card-img（或 card-img-top/card-img-bottom）配合使用，且 card-img-overlay 必须是 .card 的直接子元素，否则定位会错乱。
-
card-img用来设置整张卡片的背景图（需设为width: 100%和object-fit: cover才好看） -
card-img-overlay内部放标题、文本、按钮等，它自带position: absolute和top: 0，但默认不设高度，靠内容撑开 - 如果图片没铺满，大概率是因为没给
card-img加height或父容器没高度；card-img-overlay默认有padding，别忘了减掉
<div class="card">
<img src="bg.jpg" class="card-img" alt="背景">
<div class="card-img-overlay">
<h5 class="card-title">标题</h5>
<p class="card-text">描述文字</p>
</div>
</div>
为什么不能只用 background-image？
直接给 .card 设 background-image 看似简单，但实际踩坑多：响应式缩放难控制、无法利用 object-fit 裁剪、图片加载失败时无 fallback、与 card-img-top 的边距逻辑冲突。
更关键的是，Bootstrap 的卡片结构依赖图片作为 DOM 元素——比如你需要点击图片跳转、加懒加载 loading="lazy"、或者用 srcset 做高清适配，这些都要求图片是 <img> 标签而非 CSS 属性。
- 用 CSS
background-image时，card-img-overlay的绝对定位参考系可能错位（尤其卡片用了flex或grid） - 移动端图片压缩后尺寸变小，
background-size: cover容易拉伸失真；而<img>+object-fit: cover更可控 - 无障碍访问中，
<img>可以加alt，CSS 背景图完全不可读
card-img-top 和 card-img 的区别与选择
两者都能当背景，但语义和行为不同：card-img-top 是“插在卡片顶部的内容”，会占据流式布局空间；card-img 是“整个卡片的视觉底图”，不占文档流，更适合做背景叠加。
- 选
card-img：想让图片铺满整个卡片区域（包括标题/正文区），且内容全部叠在上面 - 选
card-img-top：只是想在卡片最上方加一张图，下面的文字区域仍保持白底，默认留出上下间距 - 如果用了
card-img-top还硬套card-img-overlay，会导致 overlay 定位起点偏上（因为 top 图本身占高），需要额外调top值 - 所有
card-img*类都会自动设width: 100%，但不会设高度——所以必须手动加height或用aspect-ratio控制比例
图片加载失败时的降级处理
用户网络差、路径写错、CDN 挂了，都可能导致 <img> 显示成一个空框或浏览器默认破损图标。这时候 card-img-overlay 会直接叠在白底上，体验断层。
- 给
<img>加onerror回调，切换为纯色背景：onerror="this.style.display='none'; this.parentElement.style.backgroundColor='#f8f9fa'" - 更稳妥的做法是用伪元素盖一层底色：
.card-img::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #e9ecef; z-index: -1; }，再把图片设为position: relative覆盖其上 - 别忽略
alt属性——即使图片挂了，屏幕阅读器也能读出描述，也算一种内容降级
真正麻烦的不是怎么叠上去，而是图片没加载出来时，整个卡片的信息层级就塌了。这时候 card-img-overlay 的文字如果没有足够对比度，或者没设 text-shadow，用户根本看不见写的是啥。
