IE6\7\8浏览器支持RGBA半透明背景色的方法

作者：西西点击：0次评论：0次标签： CSS

RGBA是CSS3中新增的属性，在RGB的基础上多了控制alpha透明度的参数。

介绍：R、G、B三个参数，正整数值的取值范围为：0 - 255，百分数值的取值范围为：0.0% - 100.0%（部分浏览器不支持使用百分数值）。超出范围的数值将被截至其最接近的取值极限。A参数，取值在0~1之间，不可为负值。

浏览器兼容性：IE9以下版本浏览器不支持。

ie浏览器支持RGBA半透明背景色的方法：

<!--[if IE]>

<style type="text/css">

.bg{

background:transparent;

filter:

progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B7D0000,endColorstr=#4B7D0000);

</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浏览器不会出现这种情况。

以上的css代码也可以写在css样式表中，当然需要css hack来支持，具体的css hack写法可以参照《css hack》一文。当然，实现HTML网页背景半透明的方法还有很多，比如通过PNG半透明图片实现，或者通过兼容性较好的css属性opacity实现，具体方法，可以参照《PNG 半透明》和《CSS Opacity》文章。