CSS rgb() 函数
- 上一页 CSS repeating-radial-gradient() 函数
- 下一页 CSS rotate() 函数
- 返回上一层 CSS 函数参考手册
定义和用法
CSS 的 rgb()
函数使用红-绿-蓝(RGB)颜色模型指定颜色。还可以添加一个可选的透明度通道(表示颜色的透明度)。
RGB 颜色值通过 rgb(red green blue)
指定。每个参数定义该颜色的强度,可以是 0 到 255 之间的整数或 0% 到 100% 之间的百分比值。
例如,rgb(0 0 255) 值呈现为蓝色,因为蓝色参数设置为最大值(255),而其他参数设置为 0。
注意:rgba()
函数是 rgb()
函数的别名。建议使用 rgb()
函数。
实例
定义不同的 RGB(A) 颜色:
#p1 {background-color:rgb(255 0 0);} /* 红色 */ #p2 {background-color:rgb(0 255 0);} /* 绿色 */ #p3 {background-color:rgb(0 0 255);} /* 蓝色 */ #p4 {background-color:rgb(192 192 192);} /* 灰色 */ #p5 {background-color:rgb(255 255 0);} /* 黄色 */ #p6 {background-color:rgb(255 0 255);} /* 樱桃色 */ #p7 {background-color:rgb(255 0 255 / 0.2);} /* 带透明度的樱桃色 */ #p8 {background-color:rgb(0 0 255 / 50%);} /* 带透明度的蓝色 */
CSS 语法
绝对值语法
rgb(R G B / A)
值 | 描述 |
---|---|
R |
必需。定义红色的强度,可以是 0 到 255 之间的整数或 0% 到 100% 之间的百分比。 也可以使用 none(等同于 0%)。 |
G |
必需。定义绿色的强度,可以是 0 到 255 之间的整数或 0% 到 100% 之间的百分比。 也可以使用 none(等同于 0%)。 |
B |
必需。定义蓝色的强度,可以是 0 到 255 之间的整数或 0% 到 100% 之间的百分比。 也可以使用 none(等同于 0%)。 |
/ A |
可选。表示颜色的透明度通道值,0%(或 0)表示完全透明,100%(或 1)表示完全不透明。 也可以使用 none(表示无透明度通道)。默认值为 100%。 |
相对值语法
rgb(from color R G B / A)
值 | 描述 |
---|---|
from color |
以关键字 from 开头,后跟表示原始颜色的颜色值。 这是相对颜色所基于的原始颜色。 |
R |
必需。定义红色的强度,可以是 0 到 255 之间的整数或 0% 到 100% 之间的百分比。 也可以使用 none(等同于 0%)。 |
G |
必需。定义绿色的强度,可以是 0 到 255 之间的整数或 0% 到 100% 之间的百分比。 也可以使用 none(等同于 0%)。 |
B |
必需。定义蓝色的强度,可以是 0 到 255 之间的整数或 0% 到 100% 之间的百分比。 也可以使用 none(等同于 0%)。 |
/ A |
可选。表示颜色的透明度通道值,0%(或 0)表示完全透明,100%(或 1)表示完全不透明。 也可以使用 none(表示无透明度通道)。默认值为 100%。 |
技术细节
版本: | CSS2 |
---|
浏览器支持
表格中的数字表示首个完全支持该函数的浏览器版本。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
rgb() | ||||
1 | 4 | 1 | 1 | 3.5 |
带透明度参数的 rgb() | ||||
65 | 79 | 52 | 12.1 | 52 |
空格分隔参数 | ||||
65 | 79 | 52 | 12.1 | 52 |
- 上一页 CSS repeating-radial-gradient() 函数
- 下一页 CSS rotate() 函数
- 返回上一层 CSS 函数参考手册