使用rgba属性兼容IE8

兼容性

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

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

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

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

我是内部文本

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

我是内部文本

前三个参数是颜色的RGB表示法，如0,0,0就表示黑色，最后一个参数是alpha值，和opacity具有相同的意思，但这次的设置是使的背景色变为50%的透明灰度，内部节点和内容依然是不透明的。对于支持该属性的浏览器可以直接使用：

html

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

针对IE6-8的hack为：

css

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

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

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

html

<!--[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滤镜来实现同样的效果。上代码：

在线演示

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是一种在CSS中声明包含透明效果的颜色的方法颜色还可以用于border，不过，不同的浏览器对于border的RGBa支持不太一样，不过唯一的不同是，Firefox在border的拐角处会出现叠加，比如透明度是0.4，那么在Firefox中，四个角的透明度会变成0.8，而支持RGBa的非FF浏览器不会出现这种情况。

使用rgba属性兼容IE8 ​

兼容性 ​

使用rgba属性兼容IE8

兼容性