完美解决IE8下不兼容rgba()的问题

为了解决IE8浏览器不兼容rgba()的问题，我们可以在CSS当中实现透明效果。

方案一：使用IE8支持的滤镜效果

IE8支持的滤镜可以实现类似于rgba()的透明效果，可以在属性当中使用Alpha滤镜来达到透明的效果。

/* 使用Alpha滤镜 */
background: none; /* 首先需要将原来的背景去掉 */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false, startColorstr = #cc333333, endColorstr = #cc333333);
zoom: 1;

上面的代码中，我们先将原来的背景使用 background: none 去掉，然后使用Alpha滤镜来设置透明效果，其中 startColorstr 和 endColorstr 分别指定起始和结束的颜色值，需要注意的是颜色值需要加上 #cc 或 #aa 这样的透明度值来指定不透明度的大小，值越小越透明，值越大越不透明。

方案二：使用HSLA属性

HSLA属性是CSS3新增的属性，它可以通过指定颜色的亮度、饱和度和色相来设置颜色，其中A就是透明度，取值范围是0到1。IE8不支持HSLA属性，但是它支持HSL属性和Alpha滤镜，我们可以把HSLA属性转换成HSL属性和Alpha滤镜来实现。

/* 使用HSL属性和Alpha滤镜 */
background-color: hsla(0,0%,0%,.5); /* 使用HSLA属性设置颜色和透明度 */
background-color: hsl(0,0%,0%); /* 使用HSL属性设置颜色 */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false, startColorstr=#80000000, endColorstr=#80000000);
zoom: 1;

上面的代码中，我们先使用HSLA属性来设置颜色和透明度，然后再使用Alpha滤镜来实现透明效果，其中的colorstr值可以使用在线转换工具来进行转换，需要注意的是，IE的透明度取值是0到255，而CSS3的取值是0到1，因此我们需要把CSS3的取值乘以255再转换成字符串形式。

示例说明

接下来，我们来看两个使用以上两种方案实现透明效果的示例：

示例1：使用Alpha滤镜实现透明背景色

/* 使用Alpha滤镜 */
background: none; /* 首先需要将原来的背景去掉 */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false, startColorstr = #cc333333, endColorstr = #cc333333);
zoom: 1;

上面的代码中，我们在一个块级元素上使用了Alpha滤镜来设置其背景色为半透明的黑色，其中的 startColorstr 和 endColorstr 分别指定起始和结束的颜色值，需要注意的是颜色值需要加上 #cc 这样的透明度值来指定不透明度的大小，值越小越透明，值越大越不透明。

示例2：使用HSL属性和Alpha滤镜实现透明背景色

/* 使用HSL属性和Alpha滤镜 */
background-color: hsla(0,0%,0%,.5); /* 使用HSLA属性设置颜色和透明度 */
background-color: hsl(0,0%,0%); /* 使用HSL属性设置颜色 */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false, startColorstr=#80000000, endColorstr=#80000000);
zoom: 1;

上面的代码中，我们同样是在一个块级元素上实现透明背景色的效果，不过这次我们使用了HSL属性和Alpha滤镜来实现，其中的 startColorstr 和 endColorstr 也是指定起始和结束的颜色值，需要注意的是，IE的透明度取值是0到255，而CSS3的取值是0到1，因此我们需要把CSS3的取值乘以255再转换成字符串形式。

通过以上的两个例子，我们可以看到，使用Alpha滤镜和HSL属性可以完美地解决IE8不兼容rgba()的问题，同时也可以兼容其他浏览器。