HTML - RGB 和 RGBA 颜色

所有浏览器都支持 HTML RGB 和 RGBA 颜色。RGB 颜色值表示颜色中 RED、GREEN 和 BLUE 的强度。RGBA 是 RGB 的扩展，它还指定了颜色不透明度的 Alpha 通道。

我们可以使用红色、绿色和蓝色的组合来制作任何颜色。如果设置所有三种颜色的最大强度，则生成的颜色将为白色。同样，如果我们为所有RGB值提供零强度，我们将得到黑色。

RGB 颜色值

在 HTML 中，可以使用以下函数定义颜色。


rgb(red, green, blue)

rgb（）函数采用三个参数，即红色值、绿色值和蓝色值。每个值都使用一个整数指定，该整数的范围可以从 0 到 255，其中 0 表示无颜色，255 表示全色强度。混合这些值将创建其他不同的颜色。

RGBA 颜色值

在 HTML 中，可以使用 rgba 函数定义 RGBA 颜色。


rgb(red, green, blue, alpha)

rgba（）函数接受四个参数。参数 alpha 接受介于 0 和 1 之间的十进制值，以确定 RGB 颜色的不透明度。值 0 表示颜色不可见，值 1 表示颜色完全可见。

例如，rgba（255， 0， 0， 1.0）是完全不透明的红色，rgba（255， 0， 0， 0.5）是完全透明的红色，rgba（255， 0， 0， 0.0）是完全透明的红色。

RGB和RGBA颜色的比较

下面是一个列表，显示一些使用RGB值的颜色，并使用RGBA功能降低它们的不透明度。

RGB颜色	RGB功能	RGBA颜色	RGBA功能
	rgb（0， 0， 0）		RGBA（0， 0， 0， 0.7）
	RGB（255， 0， 0）		RGBA（255， 0， 0， 0.7）
	RGB（0,255,0）		RGBA（0， 255， 0， 0.7）
	rgb（0， 0， 255）		RGBA（0， 0， 255， 0.7）
	RGB（255， 255， 0）		RGBA（255， 255， 0， 0.7）
	rgb（0， 255， 255）		RGBA（0， 255， 255， 0.7）
	RGB（255， 0， 255）		RGBA（255， 0， 255， 0.7）
	RGB（192， 192， 192）		RGBA（192， 192， 192， 0.7）
	RGB（255， 255， 255）		RGBA（255， 255， 255， 0.7）

HTML RGB 和 RGBA 颜色示例

以下是一些示例，说明在 HTML 中使用 rgb 和 rgba 函数。

HTML RGB 颜色

下面是一个使用 rgb（）值按颜色代码设置 HTML 标签背景的示例。


<!DOCTYPE html>
<html>

<head>
	 <title>HTML Colors by RGB Code</title>
</head>

<body style="background-color: rgb(255,255,0);">
	 <p>
			Use different color code for body and 
			table and see the result. 
	 </p>
	 <table style="background-color: rgb(0,0,0);">
			<tr>
				 <td>
						<p style="color: rgb(255,255,255);">
							 This text will appear white on 
							 black background.
						</p>
				 </td>
			</tr>
	 </table>

</body>
</html>

HTML RGBA 颜色

在此示例中，我们使用 rgba 颜色代码设置了背景颜色和文本颜色。


<!DOCTYPE html>
<html>
<head>
	 <style>
			div{
						border: 1px solid;
						height: 30px;
						font-weight: bold;
			}
	 </style>
</head>

<body>
	 <h2>RGBA Color variations</h2>
	 <div style = 
				 "background-color: rgba(255, 0 ,0 ,1);">
			opacity 1.0
	 </div>
	 <div style = 
				 "background-color: rgba(255, 0 ,0 ,0.9);">
			opacity 0.9
	 </div>
	 <div style = 
				 "background-color: rgba(255, 0 ,0 ,0.8);">
			opacity 0.8
	 </div>
	 <div style = 
				 "background-color: rgba(255, 0 ,0 ,0.7);">
			opacity 0.7
	 </div>
	 <div style = 
				 "background-color: rgba(255, 0 ,0 ,0.6);">
			opacity 0.6
	 </div>
	 <div style = 
				 "background-color: rgba(255, 0 ,0 ,0.5);">
			opacity 0.5
	 </div>
	 <div style = 
				 "background-color: rgba(255, 0 ,0 ,0.4);">
			opacity 0.4
	 </div>
	 <div style = 
				 "background-color: rgba(255, 0 ,0 ,0.3);">
			opacity 0.3
	 </div>
	 <div style = 
				 "background-color: rgba(255, 0 ,0 ,0.2);">
			opacity 0.2
	 </div>
	 <div style = 
				 "background-color: rgba(255, 0 ,0 ,0.1);">
			opacity 0.1
	 </div>
	 <div style = 
				 "background-color: rgba(255, 0 ,0 ,0.0);">
			opacity 0.0
	 </div>
	 
</body>
</html>

打印本页