RGB颜色通过rgb()函数定义,每种颜色分量取值0-255或0%-100%,例如rgb(255, 0, 0)表示纯红色;支持透明度的rgba()增加Alpha通道,取值0到1,如rgba(0, 0, 0, 0.5)为半透明黑色,适用于动态调色和javaScript交互,现代浏览器广泛支持。

在css中,使用RGB表示颜色是通过rgb()函数来实现的。RGB代表红(red)、绿(Green)、蓝(Blue),每种颜色的值范围是0到255,或者使用百分比0%到100%。
基本语法
RGB颜色的基本写法如下:
rgb(红色值, 绿色值, 蓝色值)
其中每个颜色分量可以是:
- 0 到 255 的整数(例如:255, 0, 128)
- 0% 到 100% 的百分比(例如:100%, 0%, 50%)
使用示例
以下是一些常见的RGB用法:
立即学习“前端免费学习笔记(深入)”;
/* 纯红色 */
color: rgb(255, 0, 0);
/ 绿色 /
background-color: rgb(0, 128, 0);
/ 浅蓝色(使用百分比) /
background: rgb(70%, 80%, 100%);
/ 灰色 /
border-color: rgb(128, 128, 128);
支持透明度:RGBA
如果需要添加透明度,可以使用rgba(),它在RGB基础上增加一个Alpha通道(透明度),取值范围是0(完全透明)到1(完全不透明)。
/* 半透明黑色 */
background: rgba(0, 0, 0, 0.5);
/ 带透明度的红色背景 /
color: rgba(255, 0, 0, 0.8);
基本上就这些。RGB方式灵活直观,特别适合需要动态调整颜色或配合javascript使用的场景。现代浏览器都支持RGB和RGBA,可以直接放心使用。


