opacity会使整个元素及其子节点（包括文字）一同变透明，而rgba()仅让背景色透明、文字保持清晰；使用时需避免background简写覆盖rgba，兼容IE8需提供降级方案。
为什么用 opacity 会让文字也变透明
opacity 作用于整个元素及其所有子节点，设置为 0.5 后，不仅背景变淡，里面的文字、图标、子容器都会一起变半透明。这不是“背景半透明”，而是“整个盒子半透明”。
用 rgba() 给 background-color 单独设透明度
只需把原本的十六进制或英文色值换成 rgba() 形式，只影响背景层，文字完全不受干扰。
-
rgba(255, 255, 255, 0.8)是带 80% 不透明度的白色背景 -
rgba(0, 0, 0, 0.1)是极淡的黑色蒙层，常用于模态框遮罩 - 注意：不能对
background-image或渐变用rgba()直接控制透明度，它只管纯色背景
div { background-color: rgba(255, 100, 100, 0.3); /* 红色背景，30% 不透明 */ color: #333; /* 文字保持 100% 清晰 */ }遇到 background 缩写时别意外覆盖 rgba
如果之前用了 background: #fff; 这类简写，后面再写 background-color: rgba(...) 会被忽略——因为 background 是复合属性，会重置所有子属性。
- 要么统一用
background-color单独声明 - 要么把
rgba()写进background缩写里：background: rgba(255, 255, 255, 0.3) url(...) no-repeat center; - 检查 DevTools 中
background-color是否被 strike-through（删除线），那是被覆盖的明显信号
兼容性提醒：IE8 及更早不支持 rgba()
如果必须兼容 IE8，得加一层降级：
立即学习“前端免费学习笔记（深入）”；
- 先写
background-color: #ffffff;（IE8 识别） - 再写
background-color: rgba(255, 255, 255, 0.3);（现代浏览器覆盖） - IE8 会忽略第二行，只显示不透明白底；其他浏览器用第二行，文字始终清晰
真正要控制的从来不是“怎么让背景透一点”，而是“别让文字跟着糊”。只要记住 opacity 是全盒透明，rgba() 是颜色通道透明，就很少再踩进去。