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