应使用伪元素::before实现hover遮罩，避免额外div；容器设position:relative、overflow:hidden，伪元素absolute覆盖，配合bootstrap变量和响应式图片确保主题适配与缩放正确。
hover 时用伪元素叠加背景色遮罩，别用额外 div
直接在 <img> 外层用 <div class="card"> 或自定义容器，通过 <code>::before 伪元素实现遮罩，避免 DOM 冗余和图片被遮挡问题。Bootstrap 的 .card-img-overlay 是为图文叠加设计的，不适用于纯 hover 遮罩场景。
常见错误是给 <img> 加 position: relative 后，在它里面塞一个 <div> 做遮罩——结果图片被盖住、无法响应式缩放，或触发 layout shift。
<ul>
<li>容器设 <code>position: relative，overflow: hidden
::before 设 position: absolute; top: 0; left: 0; width: 100%; height: 100%
:hover 时改 background-color 并加 transition
z-index 正确：伪元素 z-index: 1，图片保持 z-index: 0（默认）即可用 Bootstrap 工具类快速控制遮罩颜色和透明度
Bootstrap 5+ 提供了完整的背景色工具类（如 bg-primary、bg-dark）和透明度辅助类（opacity-75），但它们不能直接作用于伪元素。得用自定义 CSS 配合 --bs-xxx CSS 变量，或写内联 style。
推荐做法：定义一个轻量级类，比如 .img-overlay-hover，并在其 ::before 中引用 Bootstrap 的颜色变量：
.img-overlay-hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--bs-primary-rgb), 0.7);
opacity: 0;
transition: opacity 0.3s ease;
}
.img-overlay-hover:hover::before {
opacity: 1;
}
注意：rgba(var(--bs-primary-rgb), 0.7) 能随 Bootstrap 主题色自动更新；硬写 #0d6efd 就失去主题适配能力。
图片本身要能正常响应式缩放，别被遮罩破坏
如果图片用了 img-fluid，但容器没设宽高约束，hover 遮罩可能拉伸变形或错位。关键点在于：遮罩尺寸必须严格跟随图片渲染后的实际尺寸，而不是父容器的 padding 或 border。
- 容器不要设固定
height，让图片自然撑开高度 - 图片加
width: 100%和height: auto（img-fluid已含） - 遮罩伪元素必须用
absolute定位 +top/left/width/height百分比，不能用transform: scale()模拟覆盖 - 若图片是圆角（
rounded），遮罩也要同步圆角：border-radius: var(--bs-border-radius)
移动端 hover 效果失效？得补 touch 兼容逻辑
iOS Safari 和部分 Android 浏览器对 :hover 支持有限，首次点击才触发，第二次才真正生效。纯 CSS 方案不可靠，需加一层 JS 判断是否触屏设备，并切换 class。
简单方案：用 if ('ontouchstart' in document.documentElement) 检测，给 body 加 touch-device 类，然后用 .touch-device .img-overlay-hover:active::before 触发遮罩。但更稳妥的是统一用 focus-within 或监听 click 事件切换 is-active 类。
容易忽略的一点：遮罩颜色在深色模式下可能对比度不足，建议用 color-mode 查询或检查 prefers-color-scheme，必要时调整遮罩透明度或色值。
