CSS rgb() 语法
在最新版本的 CSS 中，rgb() 和 rgba() 这两个函数已经合并了。在传统的 CSS 中，rgb() 函数不支持透明度。但在最新的 CSS（CSS Color Level 4）中，rgb() 已经支持设置透明度了。
语法：
rgb(red, green, blue, alpha)说明：
red、green、blue 分别代表红色、绿色和蓝色通道的值。它们的取值可以是以下 2 种：
- 整数值：范围是 0 到 255。0 表示没有该颜色，255 表示该颜色的最大强度。
- 百分比值：0% 表示没有该颜色，100% 表示该颜色的最大强度。
alpha 是一个介于 0 和 1 之间的数字。其中，0 表示完全透明，1 表示完全不透明。
示例：
/* 不包含 alpha */
rgb(255, 0, 0); /* 红色 */
rgb(0, 255, 0); /* 绿色 */
rgb(0, 0, 255); /* 蓝色 */
rgb(255, 255, 0); /* 黄色（红 + 绿） */
/* 包含 alpha */
rgb(255, 0, 0, 0.5); /* 半透明红色 */
rgb(0, 255, 0, 0.3); /* 透明绿色 */
rgb(0, 0, 255, 1); /* 不透明蓝色 */当 rgb() 包含 alpha 时，也支持使用空格分隔值，下面 2 种写法是等价的：
/* 写法 1 */
rgb(255, 0, 0, 0.5);
/* 写法 2 */
rgb(255 0 0 / 0.5)对于 rgb() 函数的使用，小伙伴们还需要清楚以下几点。
- rgb() 函数可以用于设置任何接受颜色值的属性，包括 color、background-color、border-color 等。
- 如果 rgb() 使用百分比值，则 0% 相当于 0，100% 相当于 255。
CSS rgb() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS rgb() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS rgb() 函数是如何使用的。
示例 1：rgb() 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
color: rgb(255, 0, 0); /* 红色 */
background-color: rgb(0, 255, 0); /* 绿色 */
border: 1px solid rgb(0, 0, 255); /* 蓝色 */
}
</style>
</head>
<body>
<div>绿叶网</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们将 div 的背景色设置为 rgb(255, 0, 0)，这表示红色分量为 255，绿色分量为 0，蓝色分量为 0，也就是 “纯红色” 。
示例 2：rgb() 使用百分比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
color: rgb(100%, 0%, 0%); /* 红色 */
background-color: rgb(0%, 100%, 0%); /* 绿色 */
border: 1px solid rgb(0%, 0%, 100%); /* 蓝色 */
}
</style>
</head>
<body>
<div>绿叶网</div>
</body>
</html>页面效果如下图所示。
分析：
这个例子与上一个例子效果相同，但颜色值使用百分比表示。比如，rgb(100%, 0%, 0%) 其实等价于 rgb(255, 0, 0)。
示例 3：rgb() 使用 alpha 参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div:nth-child(1) {
background-color: rgb(255, 0, 0, 0.8); /* 红色，80% 不透明度 */
}
div:nth-child(2) {
background-color: rgb(255, 0, 0, 0.5); /* 红色，50% 不透明度 */
}
div:nth-child(3) {
background-color: rgb(255, 0, 0, 0.3); /* 红色，30% 不透明度 */
}
</style>
</head>
<body>
<div>绿叶网</div>
<div>绿叶网</div>
<div>绿叶网</div>
</body>
</html>页面效果如下图所示。
