遮罩层不显示主因是父容器未设position: relative或被overflow:hidden截断；需用absolute定位、opacity/transform控制显隐、维持图片宽高比，并避免display:none和all过渡。
用 .card 容器套图片时，遮罩层不显示？先检查定位和层级
遮罩层失效最常见原因是父容器没设 position: relative，或遮罩元素被其他样式（比如 z-index 或 overflow: hidden）意外截断。bootstrap 的 .card 默认是 position: relative，但如果你加了自定义类、用了 .card-img-overlay 或嵌套了其他组件，就可能破坏这个前提。
-
.card内部必须用position: absolute定位遮罩层，且父级（通常是.card或.card-img-container）不能是static - 如果用了
.card-img-top，它本身是块级元素，但不会自动撑开.card的高度 —— 遮罩层可能“掉出”可视区，建议给.card加overflow: hidden显式裁剪 - 避免在遮罩层上写
display: none；要用opacity: 0+transition，否则 hover 动画会闪或不触发
hover 遮罩动画卡顿或跳变？关键在 transition 和初始状态匹配
CSS 过渡不是“写了就动”，它只对可计算的数值属性起作用。遮罩层如果从 display: none → block，或者 visibility: hidden → visible，就不会有过渡效果 —— 浏览器认为这是离散切换，不是连续变化。
- 推荐统一用
opacity或transform控制显隐，例如：.card:hover .card-overlay { opacity: 1; }，配合transition: opacity 0.3s ease - 若想实现“从下往上滑入”，初始设
transform: translateY(100%)，hover 时设transform: translateY(0)，别用top或bottom百分比值，容易因父容器高度未定而失准 - 不要给
transition写成all 0.3s—— 它会监听所有属性变化（包括没改的），可能引发重绘抖动，明确写成transition: opacity 0.3s, transform 0.3s
Bootstrap 5 里怎么复用它的阴影和颜色？别硬写 rgba 值
Bootstrap 5 的 shadow-sm、shadow、shadow-lg 其实就是预设好的 box-shadow 值，直接抄过去用，视觉更统一，也方便后续升级主题。
- hover 时加阴影，别手写
box-shadow: 0 4px 12px rgba(0,0,0,0.15)，查 Bootstrap 源码或 DevTools，复制它当前版本实际生效的值，比如0 0.5rem 1rem rgba(0, 0, 0, 0.15) - 遮罩背景色建议用
bg-dark bg-opacity-50这类工具类（Bootstrap 5.2+ 支持），而不是手写rgba(0,0,0,0.5)；前者可随主题色变量联动，后者一旦换深色模式就失效 - 如果遮罩里要放文字，优先用
.text-white+.text-center，别依赖继承色 ——.card在不同上下文（如.bg-light区域）里文字对比度可能不足
响应式下遮罩错位？问题常出在图片宽高比失控
当页面缩放或设备切换时，遮罩层突然偏移、拉伸或只盖住一半，大概率是因为图片没维持固有宽高比，导致绝对定位的遮罩层参照系飘了。
- 给图片容器（比如
.card-img-container）加aspect-ratio: 16/9（现代浏览器）或用 padding-bottom 技巧（兼容旧版），确保容器高度随宽度等比缩放 - 遮罩层用
width: 100%; height: 100%，别写死像素值；同时确认父容器没有max-width或flex分配异常干扰尺寸计算 - 移动端 touch 设备无 hover 状态，iOS Safari 对
:hover支持不稳定 —— 如果需要点击触发，得补 JS 监听touchstart并切 class，不能只靠纯 CSS
