解析IE, FireFox, Opera 瀏覽器支持Alpha透明的方法
更新時(shí)間：2006年12月26日 00:00:00 作者：
先請看如下代碼：
簡單解釋，IE使用私有屬性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í)也是百分比）。
從上面的代碼中你沒有看到Opera。沒錯(cuò)，Opera還未支持標(biāo)準(zhǔn)的opacity，也沒有其私有的可支持Alpha透明的屬性。
但是，我們知道，Opera是支持Alpha透明的PNG圖片的（當(dāng)然Moz Family也支持）。所以我們可以使用背景圖片來實(shí)現(xiàn)Alpha透明效果。
例子：http://realazy.org/lab/alpha/
關(guān)鍵在于：
復(fù)制代碼 代碼如下:
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的瀏覽器（FF 1.5也支持）*/
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的瀏覽器（FF 1.5也支持）*/
簡單解釋，IE使用私有屬性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í)也是百分比）。
從上面的代碼中你沒有看到Opera。沒錯(cuò)，Opera還未支持標(biāo)準(zhǔn)的opacity，也沒有其私有的可支持Alpha透明的屬性。
但是，我們知道，Opera是支持Alpha透明的PNG圖片的（當(dāng)然Moz Family也支持）。所以我們可以使用背景圖片來實(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，所以我們沒有必要使用其私有屬性了。當(dāng)然，你可以使用標(biāo)準(zhǔn)的opacity，但別同時(shí)使用Alpha透明圖片和opacity，這樣的話就成了兩者的混合了。你可以把上面的例子下載過來，然后/*opacity: .5;*/的注釋看看。
background: #ccc;
filter:alpha(opacity=50);
既然Moz Family支持Alpha透明的PNG，所以我們沒有必要使用其私有屬性了。當(dāng)然，你可以使用標(biāo)準(zhǔn)的opacity，但別同時(shí)使用Alpha透明圖片和opacity，這樣的話就成了兩者的混合了。你可以把上面的例子下載過來，然后/*opacity: .5;*/的注釋看看。
相關(guān)文章
解決鼠標(biāo)在 flash 鏈接上不停閃動的問題（web頁面中）
解決鼠標(biāo)在 flash 鏈接上不停閃動的問題（web頁面中）...2006-12-12
Cross-Browser Variable Opacity with PNG
Cross-Browser Variable Opacity with PNG...2006-12-12
em px的關(guān)系...2007-01-01
純div+css實(shí)現(xiàn)，大家可以參考下，也許有一些問題，大家可以修正下2008-12-12
CSS的margin邊界疊加深度剖析圖文演示...2007-09-09
用純CSS+DIV寫的漂亮Flash幻燈片及SQL標(biāo)簽教程！
用純CSS+DIV寫的漂亮Flash幻燈片及SQL標(biāo)簽教程！...2007-05-05
當(dāng)完成一項(xiàng)前端的工作之后，許多人都會忘記該項(xiàng)目的結(jié)構(gòu)與細(xì)節(jié)。然而代碼并不是馬上就能完全定型，在余下的時(shí)間里還有不斷的維護(hù)工作，而這些工作也許不會是你自己完成。所以，結(jié)構(gòu)優(yōu)良的代碼能很大程度上優(yōu)化它的可維護(hù)性。下面列出五種提高CSS文件可維護(hù)性的方法，也就是一種較好的CSS樣式指南。2008-05-05
頁面與css之間的聯(lián)系，老手和新手都需要了解2008-08-08
固定右欄寬度, 左欄內(nèi)容先出現(xiàn)同時(shí)自適應(yīng)寬度的布局
固定右欄寬度, 左欄內(nèi)容先出現(xiàn)同時(shí)自適應(yīng)寬度的布局...2007-01-01
解決IE7以下版本不支持無A狀態(tài)偽類的幾種方法...2007-01-01