应使用rgba()或hsla()设置背景色透明度，而非opacity；rgba(0,0,0,0.5)使背景半透明而文字保持不透明，且兼容性处理可添加十六进制fallback。
直接给父元素设置 opacity 会让所有子元素（包括文字、图片、按钮等）一起变透明，这不是我们想要的“仅背景半透明”。正确做法是用 rgba() 或 hsla() 给背景色本身设透明度，这样只影响颜色通道，不干扰子元素的渲染。
用 rgba() 设置背景色透明度
rgba() 是最常用的方式：前三个值是红、绿、蓝（0–255），第四个值是 alpha 通道（0–1），控制透明度。它只作用于该颜色属性，不影响子元素。
- ✅ 正确写法：
background-color: rgba(0, 0, 0, 0.5);—— 黑色背景 50% 透明，文字保持 100% 不透明 - ❌ 错误写法：
opacity: 0.5;—— 整个元素及其所有子元素都变半透明
兼容性与 fallback 处理
老版本 IE（IE8 及以下）不支持 rgba()，但现代项目通常已无需兼容。如需支持，可加一层纯色 fallback：
- 先写不透明的十六进制色（IE8 可识别）
- 再写
rgba()（覆盖前面的，支持的浏览器会生效）
background-color: #000;
background-color: rgba(0, 0, 0, 0.6);
立即学习“前端免费学习笔记（深入）”；
其他适用场景
除了 background-color，rgba() 同样适用于 color、border-color、box-shadow 等支持颜色值的属性：
-
color: rgba(255, 255, 255, 0.8);—— 半透明白字 -
border: 1px solid rgba(100, 100, 100, 0.3);—— 淡灰色半透明边框 -
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);—— 柔和阴影
注意：不要混用 opacity 和 rgba
如果父元素用了 opacity，再用 rgba() 也无法挽救子元素——因为 opacity 是作用于整个渲染层的。务必只选其一，优先用 rgba() 控制局部透明度。
