直接用rgba()替代opacity设置背景透明度是最轻量可靠的解法，因opacity作用于整个渲染盒导致子元素同步变灰且无法恢复，而rgba()仅控制颜色alpha通道，可实现背景半透、文字清晰的视觉分层。
直接用 rgba() 替代 opacity 设置背景透明度，是解决继承问题最轻量、最可靠的方式——前提是只影响背景，不牵连文字和子元素。
为什么 opacity 会让子元素变灰？
opacity 是作用于整个渲染盒（rendering box）的：它把父元素及其所有后代内容一起做混合运算。哪怕你在子元素上写 opacity: 1，也只是在父级已衰减后的颜色基础上“恢复到100%”，实际视觉效果仍是半透明叠加的结果。
- 弹窗遮罩层用了
opacity: 0.6，里面按钮文字发虚、图标边缘模糊 - 导航栏设了
opacity: 0.8，下拉菜单里的链接 hover 效果几乎看不出变化 - 给卡片容器加
opacity做悬停反馈，结果卡片内所有文字、图标、边框同步变淡
什么时候必须用 rgba() 而不是 opacity？
当你需要实现「背景可透、内容清晰」的视觉分层时，rgba() 是唯一合理选择。它只改变颜色值本身的 alpha 通道，不影响元素结构或后代渲染流。
-
background-color: rgba(0, 0, 0, 0.5)→ 黑色背景半透，文字保持 100% 不透明 -
border-color: rgba(255, 100, 50, 0.3)→ 边框带透明，不影响内部文字或子元素 -
color: rgba(33, 33, 33, 0.9)→ 文字轻微降噪，但不会让子span再叠加一层透明
注意：rgba() 不能用于控制整个元素的“整体透明度动画”，比如淡入淡出。那是 opacity 的专属场景。
复杂背景（如渐变、图片）还能用 rgba 吗？
不能直接用，因为 background-image 和 background-color: rgba() 是并存关系，不是替代关系。此时要拆层：
- 用伪元素
::before承载透明背景（background: linear-gradient(), rgba(...)），主元素只放内容 - 新增一个绝对定位的子元素（
position: absolute; top: 0; left: 0; width: 100%; height: 100%），单独设背景与透明度
IE8 及以下不支持 rgba() 和标准 opacity，只能靠 filter: alpha(opacity=XX) 模拟，但它强制继承——没有绕过办法。唯一有效补救：给关键子元素（如按钮、输入框、图标）显式设置纯色 background-color，例如 #fff。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
