opacity会让子元素变淡，因其作用于整个渲染盒（painting box）并强制透明混合，子元素设opacity:1也无法恢复原始不透明度；应优先用rgba()控制背景透明，复杂场景用伪元素隔离。
opacity 为什么会让子元素变淡
因为 opacity 不是颜色属性，而是作用于整个渲染盒（painting box）的合成参数。它会让父元素及其所有后代——包括文字、边框、子元素、伪元素——统一参与透明混合。哪怕你在子元素里写 opacity: 1，也只是在父级已衰减的画布上再绘制一次，最终效果仍是 0.4 × 1 = 0.4。这不是继承问题，是浏览器底层绘制行为，不可逆。
用 rgba() 替代 background-color 实现仅背景透明
这是最常用、兼容性最好、无需改 DOM 结构的解法。关键在于：只把 alpha 通道加在你需要透明的部分（比如背景），其他内容完全不受影响。
-
background-color: rgba(0, 0, 0, 0.4)✅ 黑色背景 40% 不透明，文字依然锐利 -
background-color: rgba(255, 255, 255, 0)✅ 可用，但更推荐transparent（尤其在渐变中） -
background: linear-gradient(to right, rgba(255,0,0,0.2), rgba(0,0,255,0.2))✅ 渐变中每个色标可独立控透明 - 避免
rgba(0,0,0,0.3) !important这类冗余写法，!important对透明度控制毫无意义
遇到图片背景或模糊叠加时，用 ::before 伪元素隔离
当背景是 background-image + backdrop-filter: blur(4px) + 半透叠加时，rgba() 不够用。这时用伪元素承载遮罩层，是最稳妥的分离方案。
- 给父容器设
position: relative -
::before设position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: -1; - 确保真实内容的
z-index> 0，且不设opacity - 伪元素必须有
content: ""，否则不渲染
真正在意的不是“怎么写”，而是“谁在透”
很多情况下你没写 opacity，但子元素还是发灰——大概率是某个祖先元素（比如 .modal-overlay 或 body 的某层 wrapper）悄悄加了 opacity，或者用了 backdrop-filter: blur(4px) 配合半透背景。这类影响是穿透式的，查起来得一层层往上 inspect computed styles，重点看 opacity 和 backdrop-filter 的生效位置。
立即学习“前端免费学习笔记（深入）”；
