rgba()遮罩失效主因是元素无尺寸，需确保宽高或内容撑开；rgba仅透明背景，opacity影响整个元素及后代；遮罩盖不住绝对定位元素是因层叠上下文分裂，应统一上下文或提升z-index。
background: rgba() 遮罩为什么没生效
常见现象是写了 background: rgba(0, 0, 0, 0.5)，但遮罩看起来“不黑”“不透明”，甚至完全看不见。根本原因不是语法错，而是元素本身没有尺寸或内容撑开——rgba() 只作用于背景区域，如果元素 height 是 0 或未设置宽高，背景自然无处可绘。
- 确保父容器有明确
width和height，或子元素能正常流式撑开（比如内部有文字、图片） - 避免仅靠
padding或margin试图“撑开”背景——它们不贡献背景绘制区域 - 若用在伪元素上（如
::before），必须加content: ""，否则不渲染
rgba() 和 opacity 的关键区别在哪
rgba() 只让背景色半透明，元素内容（文字、子节点、边框）保持原样；而 opacity 会让整个元素及其所有后代一起变透明。这是最容易混淆也最常踩坑的地方。
- 做遮罩层时，优先用
background: rgba(0, 0, 0, 0.4)，而不是opacity: 0.4——后者会让里面按钮、文字也变淡，失去可读性 - 如果遮罩层里还要放文字按钮，用
rgba()能保证文字颜色不受影响；用opacity就得额外给子元素设opacity: 1补救，容易漏写或嵌套失效 -
rgba()兼容性更好：IE9+ 支持；opacity虽然也早，但在某些旧版安卓 WebView 中对子元素透传行为不一致
遮罩层盖不住绝对定位子元素怎么办
典型场景：父容器设了 position: relative，遮罩用 position: absolute 覆盖全屏，但里面一个 position: absolute 的按钮却显示在遮罩上方——这不是 z-index 没设，而是层叠上下文（stacking context）被意外创建了。
- 检查遮罩层和目标子元素的父容器是否都用了
position: relative+z-index，这会各自创建独立层叠上下文，导致 z-index 不可比 - 遮罩层应和要覆盖的内容同属一个层叠上下文：要么都放在同一
position: relative容器内，要么把遮罩的z-index设得足够高（如z-index: 999），且其父容器不要提前触发层叠上下文 - 避免在遮罩父容器上写
transform、filter、will-change等属性——它们也会隐式创建新层叠上下文，切断 z-index 连续性
移动端适配中 background rgba 遮罩发虚或偏色
部分 iOS Safari 和早期 Android 浏览器在渲染 rgba() 背景时，会对亚像素或半透明叠加做过度抗锯齿，导致边缘发灰、发虚，或者在深色模式下颜色偏差明显。
立即学习“前端免费学习笔记（深入）”；
- 加一行
backface-visibility: hidden或transform: translateZ(0)强制硬件加速，常能缓解渲染毛刺 - 避免用
rgba(0, 0, 0, 0.45)这类非整数透明度——某些浏览器对小数位渲染不一致，改用0.4或0.5更稳 - 深色模式下，
rgba(0, 0, 0, 0.5)在黑色背景上几乎不可见，建议配合@media (prefers-color-scheme: dark)调整为rgba(255, 255, 255, 0.3)
rgba()，而是遮罩层和内容层之间那层看不见的层叠关系——它不报错，也不警告，就默默让你的按钮穿模而出。 
