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()，得换方案：
