真覆盖需用object-fit+position：图片设height和object-fit:cover，card-body用position:relative、z-index:2和负margin上移，父card加overflow:hidden；card-img-overlay会导致布局塌陷且不兼容多组件场景。
图片顶部覆盖卡片内容的常见错误
很多人以为加个 .card-img-top 就完事了，结果发现图片下面有白边、文字没压上去、响应式时图片被裁切——根本不是“覆盖”，只是“堆叠”。问题核心在于：bootstrap 默认把图片当独立块元素处理，.card-body 会自动下移腾出空间，图片和文字之间天然存在 margin 和 padding 隔离。
用 object-fit + position 覆盖才是真覆盖
要让图片真正“撑满顶部并穿透到内容区下方”，得绕过 Bootstrap 的默认流式布局。关键两步：
- 给图片加
style="object-fit: cover; height: 200px;"（固定高+裁剪填充） - 把
.card-body设为position: relative; z-index: 2;，再手动上移：margin-top: -60px; - 确保父容器
.card设overflow: hidden;，避免文字溢出图片区域
示例结构：
<div class="card overflow-hidden">
@@##@@
<div class="card-body position-relative" style="margin-top: -60px; z-index: 2;">
<h5 class="card-title">标题</h5>
<p class="card-text mb-0">文字直接浮在图上</p>
</div>
</div>
为什么不用 card-img-overlay？
.card-img-overlay 确实是 Bootstrap 官方提供的“图片覆盖”类，但它只适用于「图片作为背景、内容全浮在上面」的场景，且强制要求图片必须用 .card-img（非-top/bottom），同时会把整个 .card-body 变成绝对定位——这会导致：
- 网格布局中卡片高度塌陷（其他列无法对齐）
- 响应式断点失效（
.col-md-4下文字可能跑出视口） - 无法与
.card-footer或.card-header共存
除非你做的是单张横幅式卡片，否则别碰它。
移动端适配最容易忽略的点
图片覆盖在手机上常出现文字被截断或字体太小的问题，不是因为 CSS 写错了，而是：
- 没加 viewport meta：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 用了固定像素高度（如
height: 200px）却没配合min-height: 20vh做兜底 -
object-fit: cover在 iOS Safari 旧版本（≤14.5）不支持，需加-webkit-object-fit: cover;
复杂点就在这里：覆盖效果本身简单，但要让它在所有设备上“看起来像设计稿那样稳”，得同时控住图片渲染、文字层叠顺序、容器裁切边界和浏览器兼容性——少一个，就露白边或错位。
