CSS颜色函数--rgb()、rgba()的语法和使用

rgb()函数和rgba()函数是前端切图工作当中经常用到的颜色函数，根据光学三原色红（red）、绿（green）、蓝（blue）三种颜色的不同分量进行混合后来决定颜色值。

RGB颜色模型又称为三原色光模型，是一种加色模型，将红、绿、蓝按不同的比例相加，便会产生各种颜色。红绿蓝三种颜色相叠加为白色。

一、rgba()函数的语法

rgba(R、G、B、alpha);

其中R、G、B分别表示红、绿、蓝各自的分量，取值范围为1-255，或百分比，即255对应100%，alpha参数，表示透明度，取值范围为0-1，也可使用百分比，如100%=1。

二、rgba()函数的使用

rgb()函数和rgba()函数前三个参数均一致，可以接受数字类型的参数，也可接受百分比形式的参数，如：

background: rgb(255, 255, 255); // 白色
background: rgb(255, 0, 0); // 红色
background: rgb(0, 255, 0); // 绿色
background: rgb(0, 0, 255); // 蓝色
background: rgba(0, 0, 0, .5); // 透明度50%的黑色
background: rgba(100%, 0%, 0%, 1); // 使用百分比参数    

在CSS Colors Level 4色值新语法里，有以下新的特性：

1、rgb()函数是rgba()函数的别名，两者接受同样的参数。如 background: rgb(0,0,0,.5);

2、可以使用空格代替逗号，如：background: rgb(0 0 0 .5);

值得一提的是，目前大部分的IDE对将rgb()视作rgba()的别名函数这一点支持度不高，会有错误提示。对于使用空格代替逗号部分IDE已支持，但是只能传入RGB参数，传入aplha参数则会失效。

因此，考虑用户体验，建议大家对CSS Colors Level 4色值新语法仅做了解即可，在项目生产环境，还是使用rgba()和rgb()函数较为妥当。

• - - - - - - - -

更多CSS函数的介绍和使用，请移步查看：《CSS函数使用详解》