CSS | rgba()函数

CSS中的rgba()函数是用于定义颜色的一种方式，它允许您指定一个颜色的红、绿、蓝和透明度值。此函数也被称为带有alpha通道的RGB颜色。

RGBA的语法

rgba(red, green, blue, alpha)

• red：代表红色分量，取值0~255或0%~100%，可省略%
• green：代表绿色分量，取值0~255或0%~100%，可省略%
• blue：代表蓝色分量，取值0~255或0%~100%，可省略%
• alpha：代表透明度，可以是0~1之间的小数或0%~100%的百分数，0表示完全透明，1表示完全不透明

RGBA的例子

• RGBA颜色的值为(255, 0, 0, 0.5)。

background-color: rgba(255, 0, 0, 0.5);

• RGBA颜色的值为(0, 255, 0, 0.3)。

color: rgba(0, 255, 0, 0.3);

• RGBA颜色的值为(0, 0, 255, 0.8)。

border-color: rgba(0, 0, 255, 0.8);

RGBA与其他颜色模式的区别

RGB和HEX颜色表示法没有透明度控制的选项，您可以使用RGBa代替透明度。

HSL颜色表示法拥有对透明度的控制，但它需要更复杂的计算，才能将HSL颜色值转换为RGB颜色值。当前大部分浏览器已支持HSLa，它支持透明度控制。但HSLa并不常用，因为其算法比RGBa更复杂，而且不容易理解。