<p>Bootstrap 5 的 .bg-* 工具类不支持透明度，因其硬编码纯色且会覆盖 rgba() 声明；应使用自定义 class（如 .bg-overlay）配合 position: absolute 和 rgba() 实现可控遮罩，并确保父容器设 position: relative。</p>
为什么直接用 background-color: rgba() 在 Bootstrap 5 遮罩上不生效
因为 Bootstrap 5 的 .bg-dark、.bg-light 等背景工具类是硬编码的纯色（如 #000 或 #fff），它们会覆盖你后续写的 rgba() 声明。即使你加了 !important，也可能被更具体的 CSS 选择器压制，尤其在组件嵌套深时。
真正可控的方式是绕过工具类，用自定义 class 定义遮罩层，并确保它位于内容上方、尺寸撑满父容器。
- 遮罩必须是
position: absolute或fixed，且父容器设position: relative - 避免依赖
.bg-*工具类——它们不支持透明度，也不响应opacity（因为会影响子元素） - 优先用
background-color: rgba(0, 0, 0, 0.4)而非opacity: 0.4，后者会让整个遮罩层及其子节点都变透明
怎么写一个可复用的半透明遮罩 class
Bootstrap 5 默认不提供带透明度的背景类，所以你需要自己补一个。推荐在自定义 CSS 文件末尾（或 <style> 块中）添加：
.bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}这个 class 满足两个关键点：一是只作用于自身背景，不影响子元素；二是尺寸和定位明确，不会因 Bootstrap 的 margin/padding 类意外偏移。
立即学习“前端免费学习笔记（深入）”；
- 如果用于模态框（
.modal）内，父容器已设position: relative，直接加bg-overlay即可 - 若用于轮播图（
.carousel-item），需确认该 item 有position: relative（Bootstrap 5 默认已有） - 数值
0.4可按需调整：0.2–0.3 适合文字叠加，0.5–0.7 适合按钮/图标高对比需求
如何让遮罩和内容层正确堆叠（z-index 易错点）
常见错误是遮罩没盖住内容，或者盖住了但点击穿透。根本原因是 z-index 没形成独立层叠上下文，或值冲突。
Bootstrap 5 自带的 z-index 基线是：.modal 为 1055，.toast 为 1090，而普通元素默认是 auto。你的 .bg-overlay 设 z-index: 1 在大多数场景下不够用。
- 如果遮罩在
.card内，建议设z-index: 10（因为.card默认无z-index，其子元素按文档流渲染） - 如果遮罩在
.modal-body中，至少要设z-index: 1050才能压住内部文本和按钮 - 切勿对遮罩层设
pointer-events: none，否则无法阻挡点击；如需点击穿透，应改用pointer-events: auto并监听事件委托
要不要用伪元素替代真实 DOM 节点
可以，而且更轻量。比如给卡片加遮罩，不用额外写 <div class="bg-overlay"></div>，直接用 ::before：
.card.has-overlay::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.35);
z-index: 5;
}这样 HTML 更干净，也省去 JS 动态增删节点的麻烦。但注意：伪元素不能包含子节点，所以如果遮罩里还要放按钮或文字，就得用真实元素。
- 伪元素方式要求父容器有
position: relative，且不能设overflow: hidden（否则可能裁掉伪元素） - 调试时在 DevTools 里看不到伪元素的 DOM 节点，容易误判是否生效——记得在 Styles 面板里检查
::before是否被禁用或覆盖 - 多个重叠伪元素（比如同时用
::before和::after）时，z-index依然有效，但顺序取决于声明先后
实际项目中，最常被忽略的是父容器的 position 属性和伪元素的 content 必填项——少写一个 content: ""，::before 就完全不渲染。
