CSS 中实现透明效果主要有两种核心属性：opacity 和 rgba()，它们的工作原理和适用场景有很大不同，理解它们的区别至关重要。
（图片来源网络，侵删）
opacity 属性
opacity 是一个 CSS 属性，用于设置一个元素的不透明度或透明度。
语法
opacity: value;
value: 一个介于0（完全透明）和0（完全不透明）之间的数字，也可以使用百分比，50%等同于5。
特点
- 影响整个元素：
opacity会将元素及其（包括文本、图片、子元素、边框、背景等）都变得透明，它作用于整个元素作为一个整体。 - 继承性：子元素会继承父元素的透明度，如果一个设置了
opacity: 0.5;的div包含了一个p标签，p标签的文本也会是 50% 透明，你无法单独让子元素变得更不透明。 - 创建新的层叠上下文：设置
opacity且值小于1的元素会创建一个新的层叠上下文（stacking context）。
示例
下面是一个简单的例子,展示 opacity 如何影响整个元素。
<div class="parent"> <p>这段文字会随着父元素一起变透明。</p> <img src="https://via.placeholder.com/100x50" alt="图片"> </div>
.parent {
background-color: lightblue;
padding: 20px;
border: 2px solid blue;
/* 整个父元素及其所有内容都变为50%透明 */
opacity: 0.5;
}
效果：div 的背景、边框、内部文字和图片都会是半透明的。
rgba() 和 hsla() 颜色值
这种方法不是通过独立的属性,而是通过在定义颜色（背景色、文字色、边框色等）时使用带有透明度通道的颜色值来实现的。
（图片来源网络，侵删）
rgba() (Red, Green, Blue, Alpha)
- 语法：
rgba(r, g, b, a)r,g,b: 红色、绿色、蓝色的值，可以是0-255的整数或0%-100%的百分比。a: Alpha 通道（透明度），一个介于0（完全透明）和0（完全不透明）之间的数字。
hsla() (Hue, Saturation, Lightness, Alpha)
- 语法：
hsla(h, s%, l%, a)h: 色调（0-360）。s: 饱和度（0%-100%）。l: 亮度（0%-100%）。a: Alpha 通道（透明度），与rgba()一样，介于0和0之间。
特点
- 只影响特定属性：
rgba()或hsla()只能应用于单一的颜色属性，background-color,color,border-color,box-shadow等，它不会影响元素内的其他内容（如文本或图片）。 - 非继承性：子元素不会继承父元素背景色的透明度，子元素的背景色会覆盖父元素的背景色，除非子元素本身也是透明的。
- 更精细的控制：当你只想让背景透明，而保持文字和图片清晰可见时，这是最佳选择。
示例
使用 rgba() 只让背景透明。
<div class="box-rgba"> <p>这段文字保持清晰可见，只有背景是透明的。</p> <img src="https://via.placeholder.com/100x50" alt="图片"> </div>
.box-rgba {
background-color: rgba(135, 206, 235, 0.5); /* 半透明的天蓝色 */
padding: 20px;
border: 2px solid blue;
}
效果：div 的背景是半透明的，但里面的文字和图片保持完全不透明。
background-color 与 opacity 的性能对比
这是一个非常重要的区别,尤其是在处理动画时。
opacity: 浏览器会为设置了opacity的元素创建一个独立的图层，并使用 GPU 加速进行合成和渲染，这使得opacity的动画（transition: opacity 0.3s;）通常非常流畅。rgba(): 当你改变background-color时，浏览器需要重新计算和绘制该元素的背景，这是一个重绘 操作，而不是图层合成，重绘操作比图层合成更耗费性能，尤其是在复杂元素上。
如果你需要对透明度进行动画,优先使用 opacity，如果你只是需要静态的、半透明的背景，优先使用 rgba()，因为它不会影响元素内的其他内容。
（图片来源网络，侵删）
总结与对比
| 特性 | opacity |
rgba() / hsla() |
|---|---|---|
| 作用范围 | 整个元素及其所有子内容 | 单一的颜色属性（背景、文字等） |
| 继承性 | 子元素继承父元素的透明度 | 不透明度不继承，子元素有自己的背景 |
| 适用场景 | 模态框遮罩层、整体淡入淡出效果 | 只需要背景透明，内容清晰可见的卡片、按钮等 |
| 性能（动画） | 优秀，GPU 加速，流畅 | 一般，触发重绘，性能较差 |
如何选择？
-
选择
opacity的情况：- 你想让整个元素（包括里面的所有东西）一起淡入淡出。
- 创建一个覆盖整个屏幕的半透明遮罩层（modal overlay）。
- 任何需要将元素作为一个整体来应用透明度的场景。
-
选择
rgba()/hsla()的情况：- 你只想让背景透明,但文字、图片等内容必须保持清晰。
- 设计一个半透明的卡片或按钮,确保其上的文字可读。
- 为边框或阴影添加透明效果。
现代 CSS 方案：background-color with opacity
一个较新的、非常强大的技巧是直接在 background-color 属性上使用 opacity，这结合了两者的优点：只影响背景，并且性能优异。
语法：
background-color: rgb(135, 206, 235 / 0.5); /* 使用斜杠分隔符 */ /* 或者 */ background-color: rgba(135, 206, 235, 0.5); /* 传统写法 */
在现代浏览器中,直接在 rgb() 后面用 加上 alpha 值是等价的，并且同样能获得很好的性能，这是目前推荐用于背景透明的首选方法。
示例：
.box-modern {
background-color: rgb(135, 206, 235 / 0.5); /* 推荐写法 */
padding: 20px;
border: 2px solid blue;
}
这个效果和 rgba() 完全一样，但性能更好，是未来的趋势。
