Html 简明教程
HTML - RGB and RGBA Colors
所有浏览器都支持 HTML RGB 和 RGBA 颜色。 RGB 颜色值表示颜色中红色、绿色和蓝色的强度。 RGBA 是 RGB 的扩展，还为颜色的不透明度指定了一个 alpha 通道。
HTML RGB and RGBA colors are supported by all browsers. RGB color value represent intensity of RED, GREEN and BLUE in a color. RGBA is extension of RGB, that also specify a alpha channel for opacity of color.
我们可以使用红色、绿色和蓝色的组合来制作任何颜色。如果你设置所有三种颜色的最大强度，则最终颜色将为白色。同样，如果我们为所有 RGB 值提供零强度，我们将获得黑色。
We can make any colors using combination RED, GREEN and BLUE. If you set maximum intensity of all three colors, then the resulting color will be white. Similarly if we give zero intensity for all RGB values, we will get black color.
RGB Color Values
在 HTML 中，可以使用以下函数定义颜色。
In HTML a color can be defined using the below function.
rgb(red, green, blue)
rgb() 函数采用三个参数，分别是红色值、绿色值和蓝色值。每个值使用 0 到 255 之间的整数指定，其中 0 表示没有颜色，而 255 表示全彩强度。混合这些值将创建其他不同颜色。
The rgb() function takes three parameters namely the red value, the green value and the blue value. Each value is specified using an integer which can range from 0 to 255, where 0 means no color and 255 means full color intensity. Mixing these values will create other different colors.
RGBA Color Values
在 HTML 中，可以使用 rgba 函数定义 RGBA 颜色。
In HTML a RGBA color can be defined by using rgba function.
rgb(red, green, blue, alpha)
rgba() 函数采用四个参数。alpha 参数接受 0 到 1 之间的小数，以确定 RGB 颜色的不透明度。值 0 表示颜色不可见，值 1 表示颜色完全可见。
The rgba() function takes four parameters. The parameter alpha accepts a decimal value between 0 and 1 to determine opacity of a RGB color. The value 0 indicates that the color is not visible and value 1 indicates color is fully visible.
例如，rgba(255, 0, 0, 1.0) 是完全不透明的红色，rgba(255, 0, 0, 0.5) 是半透明红色，rgba(255, 0, 0, 0.0) 是完全透明的红色。
For example, rgba(255, 0, 0, 1.0) is fully opaque red, rgba(255, 0, 0, 0.5) is semi-transparent red, and rgba(255, 0, 0, 0.0) is fully transparent red.
Comparison of RGB & RGBA Colors
以下列出了几个使用 RGB 值表示的颜色及其使用 RGBA 函数实现的透明度降低的示例。
Following is a list to show a few colors using RGB values and their opacity reduced form using RGBA function.
RGB Color |
RGB function |
RGBA Color |
RGBA function |
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) |
Examples of HTML RGB and RGBA Colors
以下是几个使用 HTML 中的 rgb 和 rgba 函数的示例。
Here are few examples that illustrate use of rgb and rgba functions in HTML.
HTML RGB Colors
这里有一个使用 rgb() 值通过颜色代码设置 HTML 标记背景的示例。
Here is an example to set background of HTML tags by color code using rgb() values.
<!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 Colors
在此示例中，我们使用 rgba 颜色代码设置了背景颜色和文本颜色。
In this example, we have set background color and text color using rgba color code.
<!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>