视觉上可能看起来一样，但本质完全不同。要分两种情况说，因为「用不透明度」有两种写法。
1、先区分两种「不透明度」写法
/* 写法 A：opacity 属性 —— 影响整个元素 */
.box { color: #000; opacity: 0.5; }
/* 写法 B：颜色自带 alpha —— 只影响这一个颜色 */
.box { color: rgba(0, 0, 0, 0.5); }
/* 写法 C：直接给浅色 */
.box { color: #808080; }
2、核心区别：是否与「背景」发生混合
「深色 + 不透明度」是半透明的，最终呈现的颜色 = 这个深色和它背后的东西做 alpha 混合的结果。而「直接设浅色」是不透明的，它盖住一切，颜色永远是固定的。
- 背景是纯白时：
rgba(0,0,0,0.5)看起来 ≈#808080，两者几乎一模一样。 - 背景换成其他颜色时：半透明的会跟着变（背景是蓝色 → 它发蓝），而
#808080始终是那个灰。 - 背景是图片/渐变时：半透明的会透出底下的纹理，浅色则完全盖住。
最关键的一点：浅色 =「我就是这个颜色」；深色+透明 =「我让背景透过来一部分」。
3、opacity 和 rgba 之间也有大区别
opacity: 0.5（写法 A） | rgba(…, 0.5)（写法 B） | |
|---|---|---|
| 作用范围 | 整个元素：文字、边框、背景、子元素全部变透明 | 只有这一个颜色（比如只有文字或只有背景） |
| 子元素 | 一起变透明，且无法在子元素上「加回来」 | 不影响子元素 |
| 层叠上下文 | opacity < 1 会创建新的 stacking context（影响 z-index、定位） | 不会 |
| 性能 | 常被 GPU 单独合成成一层 | 普通绘制 |
所以 opacity 那种「连边框带子元素一起淡掉」的副作用，经常是 bug 来源——想让「某个颜色变浅」基本都该用 rgba 而不是 opacity。
4、实际怎么选
- 想要一个稳定、可预测的颜色（按钮文字、图标、固定 UI 色）→ 直接给浅色 / 用设计系统里的色值。最省心，不受背景影响。
- 想要「压暗/提亮一层」或叠在图片、彩色背景上的遮罩、半透明卡片、hover 高光 → 用
rgba（或hsla/ 现代的color-mix()），让它跟背景自然融合。 - 几乎不要用
opacity去调单个颜色的深浅——它会把整个元素和子元素都拖下水。opacity留给「整体淡入淡出动画」「禁用态整体置灰」这类确实想让整块东西一起变透明的场景。
一句话总结：看起来一样只是因为背景恰好是白的；一旦背景变了、或元素里还有别的内容，半透明和浅色就会立刻分道扬镳。
