使用rgba属性兼容IE8

① css3 rgba 即在原本3原色的基础上增加了alpha(透明度)通道，该属性的兼容性如下：

类型Internet ExplorerFirefoxChromeOperaSafari版本(×)IE6(√)Firefox 3.0.10(√)Chrome 2.0.x(√)Opera 9.64(√)Safari 4(×)IE7    (×)IE8    (√)IE9    

IE家族只有9以后的版本支持该属性；

有童鞋可能对rgba的使用环境不大清楚，但肯定熟悉opacity属性。opacity实现了元素的alpha通道，如opacity:0.5表示50%的透明度，但opacity不止实现了元素的透明度，同时包括元素的子元素也有该透明度，比如

<div style="background:#000;opacity:0.5">我是内部文本</div>

 

将使整个节点树显示为50%的透明灰度；而rgba可以直接表示颜色属性和透明度，比如

<div style="background:rgba(0,0,0,0.5);">我是内部文本</div>

前三个参数是颜色的RGB表示法，如0,0,0就表示黑色，最后一个参数是alpha值，和opacity具有相同的意思，但这次的设置是使<div>的背景色变为50%的透明灰度，内部节点和内容依然是不透明的。

对于支持该属性的浏览器可以直接使用：

.class{
    background: rgba(0,0,0,0.75);
}

针对IE6-8的hack为：

.class{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
}

用到了IE自家的filter滤镜。IE虽然不支持很多标准，但自己也提供了很多有意思的功能，比如filter滤镜、expression行内表达式等。相关的参数我不再解释，自己查查。提示两点：

1.startColorstr和endColorstr的值由两部分组成：前两位是alpha值，后六位是颜色值，都是十六进制表示法；可以用x=a*255(其中x是表达式的16进制值，a表示alpha值如0.5)；
2.因为IE5+都是支持filter的，所以可以这样写：

 
<!--[if IE 8]>
<style>
.class{-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000)";}
</style>
<![endif]-->

如果写在css里，因为IE9+既支持filter，又支持rgba，所以会看到两者叠加的效果。

RGBa是一种在CSS中声明包含透明效果的颜色的方法，通过RGBa我们可以将一个元素设置为透明，而不会影响其子元素。但是并非所有的浏览器支持RGBa的背景色，其中用户颇多的老版本IE浏览器就不支持，好在IE浏览器支持条件注释，我们可以抛弃RGB并使用IE浏览器的一个私有CSS滤镜来实现同样的效果。上代码：

<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B7D0000,endColorstr=#4B7D0000);
zoom: 1;
}
</style>
<![endif]-->

点击查看在线演示

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换算成十六进制，约等于4B。

RGBa颜色还可以用于border，不过，不同的浏览器对于border的RGBa支持不太一样，不过唯一的不同是，Firefox在border的拐角处会出现叠加，比如透明度是0.4，那么在Firefox中，四个角的透明度会变成0.8，而支持RGBa的非FF浏览器不会出现这种情况。