应使用rgba()设置背景色透明度而非opacity，因opacity会使整个元素及子元素一同变透明，而rgba()仅作用于颜色属性，可实现背景透明、文字清晰的效果。
直接用 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 的专属场景。
IE8 及以下怎么处理？
IE6–IE8 不支持 rgba() 和标准 opacity，只能靠 filter: alpha(opacity=XX) 模拟，但它强制继承——没有绕过办法。
- 唯一有效补救：给关键子元素（如按钮、输入框、图标）显式设置纯色
background-color，例如#fff或rgb(255,255,255) - 禁用
rgba()和opacity，它们在 IE8 下会被直接忽略，导致 UI 断裂 - 避免用
filter: alpha(opacity=100)覆盖子元素——无效，IE 的 alpha 滤镜是父级渲染阶段就完成的混合，子元素无法“反向抵消” - 若原背景是图片或渐变，需降级为纯色 + 留白 padding，否则边缘会漏底
复杂背景（如渐变、图片）还能用 rgba 吗？
不能直接用，因为 background-image 和 background-color: rgba() 是并存关系，不是替代关系。此时要拆层：
- 用伪元素
::before承载透明背景（background: linear-gradient(...), rgba(...)），主元素只放内容 - 或新增一个绝对定位的子元素（
position: absolute; top: 0; left: 0; width: 100%; height: 100%），单独设背景与透明度 - 不要试图在
background-image里硬塞rgba—— CSS 不支持这种写法，会静默失败
真正容易被忽略的是：很多开发者以为只要写了 rgba() 就万事大吉，却没意识到它只适用于单色背景；一旦涉及图片、渐变、多层叠加，就必须用 DOM 层级或伪元素来隔离渲染上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
