遮罩层不显示主因是父容器未设position: relative；需确保.card为直接父级、用absolute定位遮罩、以opacity而非display控制显隐，并同步border-radius与主题变量适配。
遮罩层不显示？先确认父容器是否带 position: relative
Bootstrap 5 的 .card 默认已设 position: relative，但如果你删了 class、套了额外 wrapper，或用的是 Bootstrap 4，就很可能漏掉这层。遮罩层一旦没找到定位上下文，会直接相对 body 定位，飘到页面角落甚至屏幕外。
检查方式很简单：打开浏览器开发者工具，选中卡片元素，看 computed 样式里 position 是否为 relative。不是？手动补上：
.card {
position: relative;
}
- Bootstrap 4 必须显式加，5 可省略（但建议保留，避免结构变动后失效）
- 遮罩层必须是
.card的**直接子元素**，不能嵌在.card-body或.card-img-overlay里 - 别用
display: none控制显隐——它不触发 transition，hover 动画会闪或不执行
用 ::before 伪元素实现渐变遮罩，避免 DOM 冗余
不用额外写 <div class="overlay"></div>，直接用伪元素更轻量、更可控。关键是让渐变背景只覆盖图片区域，且不影响文字和按钮交互。
典型写法：
立即学习“前端免费学习笔记（深入）”；
.card-img-hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0) 70%);
opacity: 0;
transition: opacity 0.35s ease;
z-index: 1;
}
.card-img-hover:hover::before {
opacity: 1;
}
- 渐变方向
0deg表示从下往上过渡，适合标题从底部浮现；改180deg就是从上往下 - 用
opacity而非visibility或display，确保 transition 可生效 - 别写
transition: all .3s——它会监听所有属性变化，可能拖慢重绘 - 如果图片有圆角（
rounded），记得给伪元素同步加border-radius: var(--bs-border-radius)
渐变色要适配主题？优先用 Bootstrap CSS 变量
硬写 rgba(0,0,0,0.6) 看似简单，但换深色主题时就露馅了。Bootstrap 5 提供了 --bs-dark-rgb、--bs-light-rgb 等变量，配合 rgba() 才能真正响应主题切换。
例如深色遮罩适配浅色图，同时支持主题切换：
.card-img-hover::before {
background: linear-gradient(
0deg,
rgba(var(--bs-dark-rgb), 0.8),
rgba(var(--bs-dark-rgb), 0) 70%
);
}
- 不要用
opacity代替rgba()的 alpha 值——前者会让内部文字/按钮也变灰、热区收缩 - 若需半透明彩色遮罩（比如蓝色调），用
rgba(var(--bs-primary-rgb), 0.6)，比写死#0d6efd更可靠 - 渐变终点的透明度设为
0，而非transparent，避免某些旧 WebView 解析异常
遮罩文字怎么居中又不被裁切？用 flex + inset: 0
很多人用 top: 50%; transform: translateY(-50%)，结果小屏下文字溢出或截断。根本原因是没锚定遮罩层尺寸，transform 以内容盒为基准，而字体渲染、行高、断行都会漂移。
更稳的做法：
.card-img-hover .card-img-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 1.25rem;
opacity: 0;
transition: opacity 0.35s ease;
}
.card-img-hover:hover .card-img-overlay {
opacity: 1;
}
-
inset: 0等价于top: 0; right: 0; bottom: 0; left: 0，语义更清晰，兼容性同级 - 文字靠底部对齐（
flex-end）比居中更符合阅读习惯，也避免图片顶部有天空/留白时文字被盖住 -
padding用 rem 单位，随断点自动缩放；别设固定height或line-height，否则 sm 断点下易压扁 - 图标+文字组合时，用
.d-flex .gap-2 .align-items-center，比绝对定位更抗缩放
z-index 是否真压住了图片、以及小屏下文字是否因 padding 不足而紧贴边缘。这些细节不调试到真实设备上，光看桌面预览很容易放过。 
