Opacity 与 RGBA 的本质区别

在前端开发中，控制透明度最常用的两种方式是 opacity 和 rgba。它们的取值规则一模一样，但实际效果却大相径庭。

1. 取值规则：0 与 1 代表什么？

无论是 opacity 还是 rgba 里的 a（Alpha 通道），取值范围都是 0.0 到 1.0：

• 值为 1：完全可见（100% 不透明，默认状态）。
• 值为 0：完全不可见（100% 透明，但元素依然占据页面空间且可点击）。
• 0 到 1 之间：呈现半透明状态（如 0.5）。

2. 核心区别：连带效应 vs 精准打击

它们最大的区别在于对子元素（如文字）的影响：

• opacity（整体透明 - 连带效应）

• 作用机制：作用于整个元素。给外层盒子设置 opacity，盒子内部的所有内容（包括文字、图片等）都会被迫一起变透明。

• 适用场景：需要整个模块（连同内容）一起淡入淡出、或者整体隐藏时。

• rgba（局部透明 - 精准打击）

• 作用机制：仅作用于指定的颜色属性。如果把外层盒子的背景色设为 background: rgba(0, 0, 0, 0.5)，只有背景变半透明，内部的文字依然保持 100% 清晰可见。

• 适用场景：需要实现“半透明背景 + 清晰文字”的遮罩层、弹窗背景等效果时。

---

💡 一句话避坑口诀：
要想整体隐身，就用 opacity；
只想背景透明但字要看清，必须用 rgba！