CSS3 中的 RGBA 颜色值

RGBA 颜色值表示红色、绿色、蓝色和 Alpha。Alpha 表示颜色的不透明度，即介于 0.0 和 1.0 之间的一个数字。其中，1.0 表示完全不透明。在此，我们可以看到使用 RGBA 中的 Alpha 参数创建的不透明度差异。

语法

以下是 RGBA 颜色的语法 −

rgba(red, green, blue, alpha)

上述值会添加到 rgba() 方法中。

红色

将颜色设置为 −

  • 0 到 255 之间的整数。

  • 0% 到 100% 之间的百分比

绿色

将颜色设置为 −

  • 0 到 255 之间的整数。

  • 0% 到 100% 之间的百分比

蓝色

将颜色设置为 −

  • 0 到 255 之间的整数。

  • 0% 到 100% 之间的百分比

Alpha

Alpha 是一个数字，表示 −

  • 完全透明：0.0

  • 不透明：1.0

使用 RGBA 设置文本背景色

现在，我们看一个示例，使用 RGBA 颜色值设置文本背景色 −

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      #demo1 {background-color:rgba(108,111,35,0.6);}
      #demo2 {background-color:rgba(108,111,35,0.5);}
      #demo3 {background-color:rgba(108,111,35,0.4);}
      #demo4 {background-color:rgba(108,111,35,0.3);}
      #demo5 {background-color:rgba(108,111,35,0.2);}
      #demo6 {background-color:rgba(108,111,35,0.1);}
   </style>
</head>
<body>
   <h1>Cricketers</h1>
   <p id="demo1">David Warner</p>
   <p id="demo2">Steve Smith</p>
   <p id="demo3">Mark Waugh</p>
   <p id="demo4">Steve Waugh</p>
   <p id="demo5">David Johnson</p>
   <p id="demo6">Andy Bichel</p>
</body>
</html>

更新于： 2023 年 12 月 26 日

157 浏览量

开启你的 职业

完成课程获得认证

开始学习
Advertisement