CSS opacity - 實現(xiàn)圖片半透明效果的代碼
更新時間：2007年03月21日 00:00:00 作者：
前幾天一位做網(wǎng)頁設計的朋友問我這個問題：如何通過CSS來實現(xiàn)圖片半透明效果，并且在IE和Mozilla上都可以得到支持。下面將我的方法分享給大家。
下圖為通過CSS實現(xiàn)的圖片透明效果
這個效果在IE和Mozilla瀏覽器上都可以工作，代碼如下
<img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50">
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50">
在IE中需要通過"filter"來定義透明度"opacity"，而在Mozilla中是可以直接解析"opacity",所以如果要使得這個效果在兩種瀏覽器中都得到支持，需要把兩種設定都加進去。針對IE的設定：this.filters.alpha.opacity=50 而針對Mozilla的設定：this.style.MozOpacity=0.5. 大家可以直接用這行代碼給圖片定義，只須修改圖片地址就能實現(xiàn)上圖效果。
Image with link:
相關文章
激發(fā)你的靈感:50個優(yōu)秀的Favicons
激發(fā)你的靈感:50個優(yōu)秀的Favicons...2007-02-02
Firefox CSS私有屬性備忘記錄...2006-11-11
在CSS網(wǎng)頁布局開發(fā)中，會有很多小技巧，新手朋友往往對此很不熟悉。在某一兩個小問題上，或許糾纏很長時間才能搞明白，2008-08-08
這篇文章主要介紹了關于《精通css》之幾個不錯的注意事項,需要的朋友可以參考下2007-03-03
html中CSS:hover選擇器改變子元素、同級元素、就近元素的樣式
鼠標懸浮覆蓋元素后,以前使用js的mouseover和mouseout添加監(jiān)聽事件可以實現(xiàn)交互,現(xiàn)在可以使用CSS中的:hover選擇器提高性能,:hover選擇器可以針對不同的HTML元素,在鼠標懸停時改變元素（也可以是子元素、同級元素、就近元素）的樣式,增強網(wǎng)頁的互動性和用戶體驗,2023-08-08
網(wǎng)頁設計中的 serif 和 sans-serif字體應用
2008-09-09
前兩天特意裝了一下IETester，用以方便測試，裝好后使用發(fā)現(xiàn)IE8有兩個地方需要大家注意。2008-06-06
id用于標識頁面唯一元素，id的名稱是控制某一內容塊的手段，通過將某內容塊置入div并賦予唯一的id，就可以用CSS選擇器來精確定義每一個頁面元素的外觀表現(xiàn)，包括標題、列表、圖片、鏈接或者段落等等。例如你為#header寫一個CSS規(guī)則，就可以完全不同于#content里的圖片規(guī)則。2008-05-05
DIV+CSS 滑動門技術的簡單例子...2007-03-03
【已解決】標簽頁刷新問題...2006-12-12