解析IE, FireFox, Opera 瀏覽器支持Alpha透明的方法
更新時間：2006年12月26日 00:00:00 作者：
先請看如下代碼：
簡單解釋，IE使用私有屬性filter:alpha(opacity)，Moz Family使用私有屬性-moz-opacity，而標準的屬性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的數值是透明度，使用百分比或者小數（alpha(opacity)）使用大于0小于100的數值，其實也是百分比）。
從上面的代碼中你沒有看到Opera。沒錯，Opera還未支持標準的opacity，也沒有其私有的可支持Alpha透明的屬性。
但是，我們知道，Opera是支持Alpha透明的PNG圖片的（當然Moz Family也支持）。所以我們可以使用背景圖片來實現(xiàn)Alpha透明效果。
例子：http://realazy.org/lab/alpha/
關鍵在于：
復制代碼 代碼如下:
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，而標準的屬性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的數值是透明度，使用百分比或者小數（alpha(opacity)）使用大于0小于100的數值，其實也是百分比）。
從上面的代碼中你沒有看到Opera。沒錯，Opera還未支持標準的opacity，也沒有其私有的可支持Alpha透明的屬性。
但是，我們知道，Opera是支持Alpha透明的PNG圖片的（當然Moz Family也支持）。所以我們可以使用背景圖片來實現(xiàn)Alpha透明效果。
例子：http://realazy.org/lab/alpha/
關鍵在于：
復制代碼 代碼如下:
background: transparent url(alpha80.png) left top repeat!important;
background: #ccc;
filter:alpha(opacity=50);
既然Moz Family支持Alpha透明的PNG，所以我們沒有必要使用其私有屬性了。當然，你可以使用標準的opacity，但別同時使用Alpha透明圖片和opacity，這樣的話就成了兩者的混合了。你可以把上面的例子下載過來，然后/*opacity: .5;*/的注釋看看。
background: #ccc;
filter:alpha(opacity=50);
既然Moz Family支持Alpha透明的PNG，所以我們沒有必要使用其私有屬性了。當然，你可以使用標準的opacity，但別同時使用Alpha透明圖片和opacity，這樣的話就成了兩者的混合了。你可以把上面的例子下載過來，然后/*opacity: .5;*/的注釋看看。
相關文章
很多時候，希望能夠在 HTML 中使用空格排版。但瀏覽器在解析 HTML 時，會把連續(xù)的空格解析成一個，所以我們會使用 等這樣的占位符。2008-09-09
IE8 Beta1已出，其中我們能看到很多的新特性，如layout引擎將“完全”支持CSS2.1和HTML 5，所以和之前IE瀏覽器所使用的Layout引擎并不相同，之前的IE瀏覽器并不完全符合互聯(lián)網標準。2008-06-06
div+css實現(xiàn)自適應寬度按鈕...2007-11-11
這個方法好像可行，但前提是div層的大小、位置可知，對于在后臺js文件中控制style的div就實效了。 我遇到的恰好就是這種情況，所以太遺憾了。 不過這個帖子還是應該收藏一下。2008-06-06
web標準常見問題集合4...2006-12-12
XHTML下css+div布局總結 超強推薦...2006-12-12
一個上下左右都居中的非table的純CSS實現(xiàn)代碼2008-11-11
看好的站長都是很愛國的，捐款，網頁統(tǒng)一成黑白色2008-05-05
css 命名規(guī)范...2007-02-02
Pjblog模板制作教程 超強推薦...2007-02-02