CSS | rgba()函数

在 CSS 中，rgba() 函数用于表示颜色，与 rgb() 函数类似，但多了一个透明度（alpha）参数，用于指定颜色的不透明度。该函数的语法如下：

color: rgba(red, green, blue, alpha);

其中，red、green 和 blue 表示红、绿、蓝三原色的取值，范围是 0 ~ 255；alpha 表示透明度，取值范围是 0（完全透明）到 1（完全不透明）。

例如，以下代码定义了一个半透明的蓝色背景：

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

这表明背景颜色为蓝色，不透明度为 50%。

兼容性

rgba() 函数属于 CSS3 规范，主流浏览器都已经支持。但如果要兼容老版本的 IE 浏览器，可以使用 filter 属性实现相应效果：

background-color: rgb(0, 0, 255);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#800000FF,endColorstr=#800000FF); /* 半透明蓝色 */

不过，这种方式只适用于背景色，不适用于其他颜色属性。

透明度与背景色叠加

使用 rgba() 函数设置的颜色会与父元素的背景色叠加，例如：

div {
  background-color: #ffcc33; /* 父元素背景色 */
}
span {
  background-color: rgba(0, 0, 255, 0.5); /* 子元素背景色 */
}

该代码中，span 元素的背景色是半透明的蓝色。由于 span 元素是 div 元素的子元素，因此 span 元素的背景色会与 div 元素的背景色叠加。如果 div 元素的背景色不是纯色，则背景颜色的效果可能不太一样。