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

RGBA是CSS3中新增的屬性，在RGB的基礎(chǔ)上多了控制alpha透明度的參數(shù)。

介紹：R、G、B三個(gè)參數(shù)，正整數(shù)值的取值范圍為：0 - 255，百分?jǐn)?shù)值的取值范圍為：0.0% - 100.0%（部分瀏覽器不支持使用百分?jǐn)?shù)值）。超出范圍的數(shù)值將被截至其最接近的取值極限。A參數(shù)，取值在0~1之間，不可為負(fù)值。

瀏覽器兼容性：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參數(shù)值是#AARRGGBB形式的，其中的AA是代表不透明度的十六進(jìn)制，00表示完全透明，F(xiàn)F就是全不透明，化成十進(jìn)制的范圍就是0~255，剩下的RRGGBB就是顏色的十六進(jìn)制代碼。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的紅色背景。

把30%的不透明度轉(zhuǎn)換成十六制呢的方法如下：先計(jì)算#AA的的十進(jìn)制x，x/255 = 3/10，解得x=3*255/10，然后再把x換算成十六進(jìn)制，約等于4B。

另外，RGBa顏色還可以用于border，不過，不同的瀏覽器對(duì)于border的RGBa支持不太一樣，不過唯一的不同是，firefox在border的拐角處會(huì)出現(xiàn)疊加，比如透明度是0.4，那么在Firefox中，四個(gè)角的透明度會(huì)變成0.8，而支持RGBa的非FF瀏覽器不會(huì)出現(xiàn)這種情況。

以上的css代碼也可以寫在css樣式表中，當(dāng)然需要css hack來支持，具體的css hack寫法可以參照《css hack》一文。當(dāng)然，實(shí)現(xiàn)HTML網(wǎng)頁背景半透明的方法還有很多，比如通過PNG半透明圖片實(shí)現(xiàn)，或者通過兼容性較好的css屬性opacity實(shí)現(xiàn)，具體方法，可以參照《PNG 半透明》和《CSS Opacity》文章。