card-img-overlay 必须是 .card 的直接子元素，且与 card-img 并列；需手动设置 card-img 的 width:100%、height 和 object-fit:cover；card-img-overlay 默认 padding 为 1.25rem，注意 box-sizing；图片失败时需主动处理 fallback。
card-img-overlay 必须是 .card 的直接子元素
这是最常踩的坑：把 card-img-overlay 套在 card-body 里，或者用 div 包了一层再放进去，结果文字完全不显示或定位错乱。它依赖父级 .card 的相对定位（Bootstrap 默认已设 position: relative），一旦中间多一层非 .card 的容器，定位基准就丢了。
正确结构只能是：
<div class="card">
@@##@@
<div class="card-img-overlay">
<h5 class="card-title">标题</h5>
<p class="card-text">描述文本</p>
</div>
</div>
-
card-img-overlay和card-img都必须是.card的**第一层子元素** - 不能用
card-img-top或card-img-bottom替代card-img—— 后者不占文档流，更适合做底图 - 如果用了
card-header或card-footer，它们也得和card-img-overlay并列放在.card下
card-img 要加 width:100% 和 object-fit:cover
默认情况下，card-img 的图片会按原始尺寸渲染，大概率只占左上角一小块，或者被拉伸变形。Bootstrap 不会自动帮你设这些样式，必须手动补全。
推荐写法（内联或 CSS）：
@@##@@
-
width: 100%确保铺满卡片宽度 -
height建议显式设置（比如200px或100%），否则卡片高度可能塌陷 -
object-fit: cover保持比例裁剪填充，比contain更常用；若需完整显示，才换用contain - 别依赖
card-img-top的默认行为——它会占文档流，导致card-img-overlay定位偏移
card-img-overlay 默认有 padding，内容容易溢出
card-img-overlay 自带 padding: 1.25rem，且没有 box-sizing: border-box（Bootstrap 5 默认已修正，但低版本或自定义重置 CSS 可能覆盖）。如果你发现文字紧贴边缘、按钮被截断，大概率是 padding 没生效或被覆盖。
- 检查浏览器开发者工具，确认
card-img-overlay的 computed padding 是否为1.25rem - 若要微调，建议用
pt-3 pe-4 pb-2 ps-3这类间距工具类，而不是直接改 padding - 文字内容多时，记得给
card-title加mb-2，否则和card-text粘连 - 绝对定位下，
card-img-overlay不撑高父容器，所以卡片高度完全由card-img的 height 决定
图片加载失败时没有降级 fallback
用 card-img 当背景图，一旦图片 404 或网络异常，就会留一大片空白，还可能影响可访问性。Bootstrap 不提供自动 fallback，得自己处理。
- 给
img加alt=""（语义上表示“纯装饰”，跳过屏幕阅读器） - 用
onerror内联处理（简单场景）：onerror="this.style.display='none'" - 更稳妥的做法是加一层
div.card-bg-fallback，用 CSS::before渲染纯色或 SVG 占位，配合img的opacity: 0过渡 - 如果服务端可控，优先返回带 fallback 的响应式图片 URL（如 Cloudflare Image Resizing 或 Imgix）
card-img 的 height 控制和 card-img-overlay 的层级关系——前者不设高度，卡片就塌了；后者位置一错，整个视觉就废了。别想着靠 flex 或 margin 调整 overlay，先确保结构和基础样式对了再说。
