应使用 background-color: rgba(0, 0, 0, 0.4) 实现纯色半透遮罩，避免 opacity 导致子元素继承透明；rgba() 仅作用于颜色属性，不适用于 background-image；复杂场景用 ::before 伪元素隔离遮罩层；排查发虚需逐级检查祖先元素的 opacity 和 filter。
直接用 background-color: rgba() 就行，别碰 opacity
想让遮罩层是纯色半透、但上面的文字/按钮/图标完全不透明，background-color: rgba(0, 0, 0, 0.4) 是最直接有效的写法。它只改背景色的 alpha 值，不触发任何继承，子元素样式照常生效。
常见错误是写成：.mask { opacity: 0.4; }——这会让整个 DOM 子树都变淡，哪怕你给子元素加 opacity: 1 也没用，因为最终显示是 0.4 × 1 = 0.4。
-
rgba()第四个参数是 0～1 的小数，不是百分比（别写rgba(0,0,0,40%)，浏览器会忽略整条规则） - 只适用于
background-color、border-color、color这类接受颜色值的属性 - 不能用于
background-image或渐变色中直接写 alpha（旧浏览器可能把rgba(0,0,0,0)当成黑，建议用transparent）
复杂背景时用 ::before 伪元素抽离遮罩
当遮罩要叠加在图片、模糊滤镜或 backdrop-filter 上，或者需要独立动效时，background-color: rgba() 不够灵活。这时把遮罩层从主元素里“抽出来”，用伪元素实现更可控。
关键点就三句：
- 父容器加
position: relative -
::before绝对定位铺满、设z-index: -1放在内容底下 - 所有子内容加
position: relative和正向z-index确保在遮罩之上
这样遮罩和内容物理隔离，调 rgba() 的 alpha 值，不会影响任何子元素的渲染状态。
别漏查“透明源”：子元素发虚不一定出在父级
有时候你确认父元素没设 opacity，也没用 rgba()，但子元素文字还是发灰。大概率是某个更高层祖先（比如 .modal-wrapper、body 甚至根 div）悄悄加了 opacity 或 backdrop-filter。
这种影响是穿透式的，必须打开开发者工具，逐层往上点开 computed 样式，重点盯 opacity 和 filter 两项——真正难的不是修，是先找到那个藏得深的“透明源”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
