css颜色模式 hsla 和 rgba

css颜色模式 hsla 和 rgba

在CSS3中可以使用RGBA和HSLA两种颜色模式（css3新特性），这两个都可以用来设置颜色以及指定透明度。

那么什么是RGBA和HSLA颜色模式呢？

1、什么是 RGBA?

RGBA(R,G,B,A)

取值介绍：
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。

注意：
此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。
IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理，如：

filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000);

//#88000000 的前两位数字控制透明度，取值16进制从00 -> FF（越小越透明），
//00表示完全透明，FF就是全不透明，后面六位是色值。

拓展：
DXImageTransform.Microsoft.gradient 滤镜里的 startColorstr 参数值是 #AARRGGBB 形式的， 其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的 RRGGBB 就是颜色的十六进制代码。

举例如：
background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下：先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4C。

常用透明度对应16进制关系：
.0（00） .1（19） .05（0C） .15（26）
.2（33） .3（4C） .25（3F） .35（59）
.4（66） .5（7F） .45（72） .55（8C）
.6（99） .7（B2） .65（A5） .75（BF）
.8（CC） .9（E5） .85（D8） .95（F2）

····················································································································································

2、什么是 HSLA?

HSLA(H,S,L,A)

取值介绍：
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。

直白点讲，H就是来控制颜色的变化（这个最好理解），S就是控制颜色的浓淡，L来控制亮度，100%是白色，0%是黑色，不论是那种颜色或者饱和度，A是透明度。

注意：
此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度。

使用：

background-color: hsla(0 , 0% , 0% , 0.5);

首先要知道HSLA与RGBA本质上是没有区别的，二者均能实现等价的效果，但是有些技巧是要知道的：

1. HSLA的黑色与白色，只需将L调整为0%或者100%即可，其他不用管；
2. 灰色只需将S设置为0%，此时效果至于LA有关，H无关；
3. 很直观，不用进行10进制和16进制的转换；

Come on with the rain,I’ve a smile on my face.