关于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进制的。