快捷導(dǎo)航

解析IE, FireFox, Opera 瀏覽器支持Alpha透明的方法

更新時(shí)間：2006年12月26日 00:00:00 作者：

先請(qǐng)看如下代碼：

filter:alpha(opacity=50);       /* IE */  
-moz-opacity:0.5;              /* Moz + FF */  
opacity: 0.5;           /* 支持CSS3的瀏覽器（FF 1.5也支持）*/ 

簡(jiǎn)單解釋?zhuān)琁E使用私有屬性filter:alpha(opacity)，Moz Family使用私有屬性-moz-opacity，而標(biāo)準(zhǔn)的屬性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的數(shù)值是透明度，使用百分比或者小數(shù)（alpha(opacity)）使用大于0小于100的數(shù)值，其實(shí)也是百分比）。

從上面的代碼中你沒(méi)有看到Opera。沒(méi)錯(cuò)，Opera還未支持標(biāo)準(zhǔn)的opacity，也沒(méi)有其私有的可支持Alpha透明的屬性。

但是，我們知道，Opera是支持Alpha透明的PNG圖片的（當(dāng)然Moz Family也支持）。所以我們可以使用背景圖片來(lái)實(shí)現(xiàn)Alpha透明效果。

例子：http://realazy.org/lab/alpha/

關(guān)鍵在于：

復(fù)制代碼代碼如下:

background: transparent url(alpha80.png) left top repeat!important;  
background: #ccc;  
filter:alpha(opacity=50);  
既然Moz Family支持Alpha透明的PNG，所以我們沒(méi)有必要使用其私有屬性了。當(dāng)然，你可以使用標(biāo)準(zhǔn)的opacity，但別同時(shí)使用Alpha透明圖片和opacity，這樣的話(huà)就成了兩者的混合了。你可以把上面的例子下載過(guò)來(lái)，然后/*opacity: .5;*/的注釋看看。 