应使用rgba()设置背景色透明度而非opacity，因rgba()仅影响背景色alpha通道，文字及子元素保持100%不透明；opacity则作用于整个渲染树，导致所有后代强制继承透明度。
rgba() 专治背景透明、文字不透明，而 opacity 是“全家一起透”，根本不是同一个问题的解法。
为什么 opacity 会让文字也变透明
因为 opacity 作用于整个元素及其所有后代——它不是“设背景”，而是“把整块 DOM 树变淡”。哪怕你只给一个 <div> 加 <code>opacity: 0.5，里面嵌套的 <p></p>、<span></span>、图标、子容器全都会继承这个透明度。
- 无法单独控制文字不透明：你再给文字加
opacity: 1也没用，父级opacity会强制向下叠加 - 影响交互区域：半透明后的点击热区没变，但视觉反馈被削弱，易误判
- 和
transform、filter等触发层叠上下文的属性组合时，可能意外创建新 stacking context，导致 z-index 行为异常
rgba() 是颜色值本身带透明通道，不污染子元素
background-color: rgba(0, 0, 0, 0.5) 的意思是：“画一个带 50% 透明度的黑色色块当背景”，它只参与背景绘制阶段，和文字渲染完全解耦。
- 文字、边框、子元素的 opacity 保持 1，不受影响
- 兼容现代浏览器稳定：Chrome 4+、Firefox 3+、Safari 3.1+、Opera 10.5+、IE9+ 都原生支持
- 可与
background-image安全共存，比如background: rgba(0,0,0,0.3) url(./bg.png) center/cover - 注意：别写成
background: #000; background-color: rgba(0,0,0,0.3);—— 后者虽生效，但若之前有简写background声明，可能已被重置
IE8 及更老浏览器不支持 rgba() 怎么办
它们会直接忽略 background-color: rgba(...) 这一行，退回到上一条有效的 background-color 声明。所以降级必须靠顺序兜底：
立即学习“前端免费学习笔记（深入）”；
div {
background-color: #000; /* IE8 及以下看到这个纯黑 */
background-color: rgba(0, 0, 0, 0.5); /* 支持的浏览器用这个 */
}
- 顺序不能反：如果先写 rgba() 再写 #000，老浏览器会丢弃整条规则（因不识别 rgba()）
- 别用
filter: progid:DXImageTransform.Microsoft.gradient模拟——它在 IE8 下对 alpha 渲染不稳定，且和 rgba() 视觉效果不一致 - 如果项目已明确放弃 IE8，就不用写降级；但得确认构建流程（如 PostCSS autoprefixer）没自动注入过时兼容代码
容易被忽略的关键细节
很多人以为写了 rgba() 就万事大吉，结果在真实项目里翻车，往往卡在这几个点：
-
background简写会覆盖之前的background-color：比如先写background-color: rgba(255,255,255,0.8);，后面又写background: url(img.png) no-repeat;→ 背景立刻变回不透明 - 伪元素方案（
::before+opacity）虽可行，但要手动设z-index和尺寸，一不小心就遮住内容或漏出边缘 -
hsla()原理相同，但仅当你本就在用 HSL 色系时才推荐；混用 RGB 和 HSL 容易调错色相，不如统一用rgba() - 滚动时若容器有
background-attachment: fixed或层级复杂，rgba 背景可能和下层内容产生意外叠色（尤其深色背景+浅色文字），需实机测试
