rgba实现遮罩层的关键是background-color: rgba(0,0,0,0.5)，需配合position:absolute/fixed、父容器relative、z-index及全向定位（top/left/right/bottom:0）确保铺满覆盖；IE8以下需PNG或滤镜降级。
rgba 背景色实现遮罩层的关键写法
直接用 background-color: rgba(0, 0, 0, 0.5) 就能实现半透明黑色遮罩，但必须确保父容器有内容、子元素定位正确，否则遮罩可能“看不见”或“盖不住”。rgba() 的第四个参数是 alpha 通道（0～1），不是百分比，写成 0.5，别写 50% 或 50。
遮罩层不显示的常见原因
最常踩的坑不是颜色写错，而是层级和尺寸问题：
-
position: absolute的遮罩层没配top/left/right/bottom: 0，导致它只占内容宽高，而不是铺满父容器 - 父容器没设
position: relative，导致absolute遮罩层相对整个页面定位，偏出可视区 - 遮罩层
z-index比被遮盖的内容还低，被盖在下面了 - 父容器高度为
0（比如只有浮动子元素没清除），遮罩层无处可铺
兼容性与替代方案：IE8 及更老浏览器不支持 rgba
如果必须兼容 IE8，不能用 rgba()，得换方案：
- 用半透明 PNG 图片作背景：
background: url("mask.png") - 用 IE 滤镜（仅 IE6–IE9）：
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000)，其中#80000000是 ARGB（80是 alpha 十六进制，对应约 50% 透明） - 现代项目基本可忽略 IE8，优先写
rgba，再加一行background-color: #000作降级（纯黑，非半透）
遮罩层 + 内容居中的一体化写法
实际常用遮罩配合弹窗或提示文字，推荐这样组织结构：
立即学习“前端免费学习笔记（深入）”；
.overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.overlay .content {
background: white;
padding: 20px;
border-radius: 4px;
/* 不需要额外定位 */
}注意：用 fixed 可覆盖全屏（含滚动区域），若只需盖住某个模块，把 fixed 换成 absolute，并确保父容器有 position: relative。alpha 值别低于 0.3，否则遮罩太淡失去作用；也别高于 0.8，否则内容完全不可见。
