position: absolute 的图片覆盖层不显示是因为父容器缺少 position: relative，导致其相对 body 定位而脱离卡片；Bootstrap 5 卡片默认有该属性，4 版本需手动添加，且覆盖层须为 .card 直接子元素、尺寸锚定、居中用 flex 更稳、hover 时加 will-change 提升性能、注意圆角同步及 z-index 合理设置。
为什么 position: absolute 的图片覆盖层不显示？
因为父容器没设 position: relative，absolute 会往上逐级找定位上下文，最终相对 body 定位，脱离卡片区域。Bootstrap 5 的 .card 默认是 position: relative，但如果你用了自定义卡片结构、删了 class 或套了额外 wrapper，就容易漏掉这层。
- 检查父元素是否含
position: relative（Bootstrap 5 卡片默认有，4 没有） - 若用 Bootstrap 4，必须手动给
.card加position: relative - 避免把覆盖层直接插在
.card-img-top外部——它应作为.card的子元素，且紧贴图片容器下方（或用伪元素）
覆盖层文字居中失效的常见写法错误
很多人用 top: 50%; left: 50%; transform: translate(-50%, -50%)，结果文字偏移或被裁切。根本原因是：覆盖层没设宽高，transform 以自身内容盒为基准，而文字行高、字体渲染会让“中心点”漂移。
- 给覆盖层加
width: 100%; height: 100%（或inset: 0），确保尺寸锚定图片区域 - 用
display: flex; align-items: center; justify-content: center替代transform居中更稳 - 如果卡片图片是响应式（
.card-img-top），覆盖层必须和它同级、同容器，不能放在.card-body里
hover 时覆盖层淡入但闪动或卡顿
这是典型的重绘触发问题：opacity 变化本身不触发 GPU 加速，尤其在移动设备或低配浏览器上易卡。更糟的是，如果同时改了 background 或 color，可能引发 layout thrashing。
- 强制启用硬件加速：给覆盖层加
will-change: opacity（仅 hover 前加，hover 后可移除） - 用
transition: opacity .3s ease-in-out，别加all—— 它会监听所有属性，拖慢响应 - 避免在
:hover中动态计算尺寸（比如calc(100% - 20px)），CSS 运算在 hover 瞬间可能不同步
Bootstrap 5 和 4 的关键兼容差异
Bootstrap 5 默认给 .card 设了 position: relative，但 4 没有；另外，5 的 .card-img-top 是 block 元素并自带 width: 100%，而 4 需要手动处理图片拉伸。
- BS4：必须显式写
.card { position: relative; } - BS5：可直接用
.card::before伪元素做覆盖层，无需额外 HTML - 图片圆角（
border-radius）只作用于.card-img-top，覆盖层需同步设置相同border-radius，否则边缘露白
最常被忽略的一点：覆盖层的 z-index 必须高于图片但低于卡片内其他交互元素（比如按钮）。设成 z-index: 1 很危险——万一卡片里有下拉菜单或弹窗，它们可能被盖住。稳妥做法是用 z-index: 2 起手，再根据实际层级微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
