用 background-color: rgba() 替代 opacity 是唯一可靠、语义清晰且不污染子元素的解法，因为 opacity 会降低整个渲染盒及所有子元素的透明度，而 rgba() 仅作用于颜色本身。
直接用 background-color: rgba() 替代 opacity，是唯一可靠、语义清晰、不污染子元素的解法。别绕路，也别用伪元素或 filter 模拟。
为什么 opacity 一定不行
opacity 不是“设背景”，而是把整个渲染盒（包括所有子节点）按比例混合到背景上。哪怕你只给一个 <div> 加 <code>opacity: 0.6，里面嵌套的 <p></p>、<span></span>、图标字体、SVG 全都会被强制降权——你再给文字加 opacity: 1 也没用，因为它是叠加在父级已衰减后的颜色上的。
常见错误现象：
-
modal-overlay用了opacity: 0.5，结果按钮文字发灰、下划线几乎看不见 - 导航栏 hover 时加
opacity，下拉菜单里的链接 hover 变化完全失效 - 卡片用
opacity做悬停反馈，连边框和阴影都一起变淡，视觉层级崩了
rgba() 的写法和关键细节
rgba(r, g, b, a) 中的 a 是 alpha 通道，取值范围是 0（全透）到 1（不透），不是百分比。它只作用于颜色本身，和文字、边框、子元素完全解耦。
正确写法示例：
button {
background-color: rgba(0, 120, 255, 0.9); /* 蓝底 90% 不透明 */
color: #fff;
border: 1px solid rgba(0, 120, 255, 0.3); /* 边框也可带透明，不影响文字 */
}
必须注意的坑：
- 删掉旧的
background-color: #000或background-color: black，否则会被层叠覆盖 - 别写成
background: #000; background-color: rgba(0,0,0,0.5)—— 如果前面有background简写，它已经重置了所有子属性 - 要搭配图片背景时，必须把
rgba()写进background简写里：background: rgba(0,0,0,0.3) url(./bg.jpg) center/cover
兼容性与降级处理
现代项目基本不用管 IE8，但如果你的构建流程自动注入兼容代码（比如某些 PostCSS 插件），得手动关掉——rgba() 在 IE9+、Chrome 4+、Firefox 3+、Safari 3.1+、Opera 10.5+ 都原生支持。
如果真要兼容 IE8，只能靠兜底色：
header {
background-color: #000; /* IE8 及以下看到这个 */
background-color: rgba(0,0,0,0.7); /* 支持的浏览器用这个 */
}
顺序不能反：IE8 会忽略整条含 rgba() 的声明，但保留上面那条纯色；反过来写，老浏览器直接丢弃整条规则。
什么时候不该用 rgba()
rgba() 只能控制颜色本身的透明度，没法做「整体淡入淡出」动画。如果你需要的是元素进场/退场的渐隐效果，opacity 仍是唯一选择——只是别把它和「背景半透、文字清晰」混为一谈。
另外，hsla() 原理类似，但调色逻辑不同，容易因色相偏移导致预期外的视觉偏差；#rrggbbaa（八位十六进制）虽简洁，但 Safari 14 之前不支持，兼容性不如 rgba() 稳定。
