关于RGBA颜色值

RGBA

RGBA的意思是（Red-Green-Blue-Alpha）它是在RGB上扩展包括了“alpha”通道，运行对颜色值设置透明度。

div {

background:rgba(255,0,0,0.5);

}

在RGBA中，四个数字以逗号分隔开，前面三个数字标识这个颜色的RGB值，这个设置和RGB并无任何区别，RGBA也能够设置为百分比，后面的数字表明透明度，范围在0-1之间。1表示不透明，在这里就至关于rgb(255,0,0),0表示全透明。

一般咱们为了省略一个0:

div {

background:rgba(255,0,0,.5);

}

RGBA是CSS3引入的一个颜色的值。在CSS3中，咱们能够用如下六种格式表示颜色，：

background:#f00;

background:red;

background:rgb(255,0,0);或者 rgb(100%,0%,0%);

background:rgba(255,0,0,1);

background:hsl(0,100%,50%);

background:hsla(0,100%,50%,1);

 

以上标识的都是红色。

Can I use RGBA？

最新版的浏览器都是支持RGBA的，IE8如下是不支持的，对于颜色有透明度的，可使用RGBA，选择对IE8优雅降级，使用RGB不支持透明度等。可是也有一些方法可以使RGBA在IE跨浏览器支持:

使用支持透明度通道的图片PNG。

还有一种办法就是使用IE filter:

好比我想要一个50%透明度红色的背景：

 

background:transparent;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);

zoom: 1;

这个就是利用IE filter填充了背景,咱们使用透明度设置的是7F,也就是FF的一半表明透明。若是要设置10%透明度，就要把startColorstr=#19FF0000,endColorstr=#19FF0000.后面的六位表明颜色，前面的表明的是明度，并且是16进制的,按照透明度百分比计算出FF的的百分比。由于这里咱们用的是ARGB，具体这里的计算我也没太懂。

对比：10%透明度

 

在要求完美兼容的时候，咱们可使用IE filter 或者png图片。可是通常不影响使用状况下，对IE8一下浏览采起降级，也是最明智的措施，得到最新版的浏览器，可让用户在过程当中，这也是为将来着想。由于这种手段来迫使用户得到更好的用户体验,并且咱们发现IE filter渲染的颜色并不标准。

 

总结：

RGBA在CSS3种是一个很是重要的颜色值，由于它支持alpha通道。加强了CSS对色彩的处理，咱们回顾了RGBA的格式，RGBA前面的三个数字的格式和RGB并无差异，最好一个数字的范围是0-1，表明透明度。有时咱们省略0，只写小数点和后面的数字。CSS中新增了一些颜色的表达方式，好比HSL等。为了让RGBA作到跨浏览器支持咱们要采起IE filter 或者PNG图片 filter渲染并非标准的，颜色值也是有误差。咱们在计算透明度的时候，在IE Filter中 要采用16进制的计算方式，50%的透明度是7F，也就是255的一半，127.在当前状况下，推荐使用RGBA，在不影响功能的前提下，能够对IE8如下浏览器不使用完美兼容的方案，对于影响功能时，可使用 IE filter 和png.

最后咱们提供一个计算IE filter 的网站，能够转换RGBA 和  IE filter。http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/ 。我在转换IE filter是，都是先用255乘以透明度，而后在四舍五入，而后转换成16进制的。