直接用 background-color: rgba() 替代 opacity 是唯一可靠、语义清晰且不污染子元素的解法，因为 opacity 会降低整个渲染盒及所有子元素透明度，而 rgba() 仅作用于颜色本身。
直接用 background-color: rgba() 就行，别碰 opacity——后者会让文字一起发灰，这是最常踩的坑。
为什么 opacity 一定不能用
opacity 不是“调背景”，而是把整个元素渲染盒（包括所有子节点）按比例混合到底层背景上。哪怕你只给一个 <div> 加 opacity: 0.6，里面嵌套的 <p>、图标、SVG 全都会被强制降权；再给文字加 opacity: 1 也无效，因为它是叠加在父级已衰减后的颜色上的。
- 常见错误现象：
modal-overlay用了opacity: 0.5，按钮文字发灰、下划线几乎看不见 - 导航栏 hover 时加
opacity，下拉菜单里的链接 hover 变化完全失效 - 卡片用
opacity做悬停反馈，连边框和阴影都一起变淡，视觉层级崩了
rgba() 的写法和关键细节
rgba(r, g, b, a) 中的 a 是 alpha 通道，取值范围是 0（全透）到 1（不透），必须是小数，不是百分比。它只作用于颜色本身，和文字、边框、子元素完全解耦。
- 正确写法示例：
background-color: rgba(0, 120, 255, 0.9)表示蓝底 90% 不透明 - 边框也可以带透明：
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() 对纯色有效，但对 url() 背景图无效。想让图片“变暗”同时文字清晰，得把 rgba() 写进 background 复合属性里，作为图层前置色：
立即学习“前端免费学习笔记（深入）”；
background: rgba(0, 0, 0, 0.3) url(./bg.jpg) center/cover;
这个写法中，rgba() 会盖在图片上，形成半透明遮罩效果。注意顺序：颜色在前，图片在后；如果反过来，图片会盖掉颜色。
- 如果用伪元素方案（如
::before），要确保z-index: -1且position: absolute，否则容易遮住文字 - 避免用
filter: opacity()模拟，有性能风险，且同样影响子元素渲染
兼容性与降级处理
现代项目基本不用管 IE8，但如果你的构建流程自动注入兼容代码（比如某些 PostCSS 插件），得手动关掉——rgba() 在 IE9+、Chrome 4+、Firefox 3+、Safari 3.1+、Opera 10.5+ 都原生支持。
- 真要兼容 IE8，只能靠兜底色，且顺序不能反：
background-color: #000;放上面，background-color: rgba(0,0,0,0.7);放下面 - IE8 会忽略整条含
rgba()的声明，但保留上面那条纯色；反过来写，老浏览器直接丢弃整条规则
最容易被忽略的是：DevTools 中如果看到 background-color 被划掉（strike-through），说明被前面的 background 复合属性重置了——这时候删掉简写或把它挪到 rgba() 后面，问题就没了。
