RGBA实现背景颜色透明

所谓RGBA颜色，顾名思意就是R+G+B+A的颜色，再具体点就是RED+GREEN+BLUE+ALPHA的颜色，小写一下就是red+green+blue+alpha的颜色，翻译一下就是红+绿+蓝+Alpha透明的颜色。

RGBA颜色归为CSS3属性，其余RGB的区别在于多了个A，也就是Alpha透明度，这是个很好的东西啊，我们以后要实现半透明效果（无论是背景，边框，文字颜色等都可以用半透明实现了），但是，一向不紧不慢，孤芳自赏的IE家族，目前为止还不支持rgba颜色，真是让人哀叹啊！

您可以参见下面各个浏览器对rgba的支持情况一览表，这个表不是我做的，里面把浏览器的祖宗十八代都挖出来了，不得不佩服图表制作者

 

 

浏览器、版本、平台结果后备Firefox 3.6 (OS X)作用—Firefox 3.0.5 (OS X)作用—Firefox 3.0.5 (Windows XP, Vista)作用—Firefox 2.0.0.18 (PC)无作用实色Safari 4 (Developer Preview & 4.0.4, OS X)作用—Safari 3.2.1 (OS X, Windows XP)作用—Mobile Safari (iPhone)作用—Opera 9.6.1无作用实色Opera 10 Beta (Linux & Windows)作用—Opera 10.10 (OS X)作用—IE 4.01无作用没有颜色IE 5.5 (PC via IETester)无作用没有颜色IE 6 (PC via IETester)无作用实色IE 7无作用实色IE 8 (Beta 2 & release version)无作用实色Google Chrome 0.4.154.33 (Windows XP)作用—Google Chrome 1.0.154.46 (Windows XP)作用—Google Chrome 4.0.249.49 (OS X)作用—Netscape 4.8 (PC)无作用没有颜色Navigator 9.0.0.5 Linus无作用实色SeaMonkey 1.1.14无作用没有颜色SeaMonkey 2.0作用—Sunrise 1.7.5作用—Stainless 0.2.5作用—Flock 1.2.7无作用实色Flock 2.0.2作用—BlackBerry Storm Browser作用—Camino 1.6.6无作用实色Camino 2.0b1作用—Iceape 1.1.14 (Linux)无作用实色Kazehakase 0.5.2 (Linux)无作用实色Avant 11.7 (Windows XP)无作用实色

 

对于rgba的使用，您可以参见下面的简单示例：

background:rgba(200, 54, 54, 0.5);

其中，表示半透明度的0.5前面的0是可以省掉的，直接.5也是可以的。

正如上表所展示的，IE8及其以下都对实用的rgba颜色不支持，怎么半呢？

其实细想一下，rgba颜色多了个什么东西呢，不就是半透明吗，IE不是由半透明滤镜嘛，我们只要使用：

filter:alpha(opacity=50);

不也很ok吗？

是吗？只要静下来一想，完全不是那么回事，IE半透明滤镜透明的是整个元素，它可以只透明元素的边框吗？它可以只透明文字的投影吗？都不行。

正所谓车到山前必有路，IE下某一属性是可以实现类似于rgba的效果的，那就是半透明背景

此滤镜上半身特征是 FILTER:progid:DXImageTransform.Microsoft.Gradient
最简单的使用如下：

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=i#AARRGGBB)

startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
　　其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 – FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF  是完全不透明。超出取值范围的值将被恢复为默认值。
　　取值范围为 #FF000000 – #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。

如下代码：

background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

这样就解决浏览器统一了