rgba()仅控制背景色透明度，不改变层叠顺序；需确保元素有宽高、正确定位、z-index高于被遮盖内容，并注意ie兼容性及伪元素用法。
background:rgba 为什么遮不住下面的内容
因为 rgba() 只控制颜色透明度，不改变元素自身的层叠顺序或遮罩能力。如果盒子没设背景色、没设宽高、或者被其他元素盖住，再透明的 background 也“看不见遮罩效果”。常见现象是：写了 background: rgba(0,0,0,0.5)，但底下文字照常显示，毫无遮挡感。
- 确保该盒子有明确的
width和height（或内容撑开），否则它实际尺寸为0×0 - 检查父容器是否设置了
overflow: hidden或position: relative，否则子元素可能溢出或层级错乱 -
rgba()的透明度只影响背景色本身，不影响子元素——如果想让整个盒子（含文字）变灰半透，得用opacity，但那会连内容一起透，通常不是想要的“遮罩”
遮罩层要盖住图片/视频时的定位陷阱
直接给图片加 background: rgba() 没用，<img> 是替换元素，不支持背景色覆盖自身内容。必须用额外一层盒子做遮罩，并通过定位叠上去。
- 父容器需设
position: relative，遮罩层设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 遮罩层必须在图层顺序上高于图片，加
z-index: 1（图片本身不用设z-index，默认为auto） - 若图片是响应式（比如
max-width: 100%），遮罩层也要同步响应，避免在缩放后露出边角
IE8 及更老浏览器不支持 rgba 怎么办
rgba() 在 IE9+ 才原生支持，IE8 及以下会直接忽略整条 background 声明，导致遮罩消失。不能靠“优雅降级”蒙混过关，得主动处理。
- 先写一个不透明的兜底色：
background: #000; background: rgba(0,0,0,0.5);（IE8 读第一行，现代浏览器覆盖第二行） - 如需兼容 IE7/8，可用
filter: progid:DXImageTransform.Microsoft.gradient模拟半透黑，但仅限线性渐变，且对性能有影响 - 更稳妥的做法是服务端判断 UA，对老 IE 输出带
.png遮罩图的方案，而非强求 CSS 实现
用伪元素 ::before 实现遮罩更轻量
比起额外加一层 <div>，用 <code>::before 伪元素实现遮罩更干净，DOM 更少，样式也更容易维护。
- 目标元素设
position: relative，然后写：&::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1; } - 注意伪元素默认不可见，
content: ""必须写，否则不渲染 - 如果父元素有 padding，伪元素会从
top: 0开始铺满整个盒模型区域（含 padding），需根据需要调整top/left或改用inset: 0
rgba 能解决的，得配合 aria-hidden 和 pointer-events 一起调。
