CSS opacity - 實(shí)現(xiàn)圖片半透明效果的代碼
更新時(shí)間：2007年03月21日 00:00:00 作者：
前幾天一位做網(wǎng)頁(yè)設(shè)計(jì)的朋友問我這個(gè)問題：如何通過CSS來(lái)實(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"來(lái)定義透明度"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)文章
web標(biāo)準(zhǔn)常見問題集合...2006-11-11
flash幻燈片需要先激活A(yù)ctiveX控件才能使用的又一個(gè)辦法
flash幻燈片需要先激活A(yù)ctiveX控件才能使用的又一個(gè)辦法...2007-11-11
讓網(wǎng)頁(yè)框架透明 底部對(duì)齊的代碼
2008-01-01
用DIV+CSS寫小三角...2007-01-01
關(guān)于< tbody >的一個(gè)實(shí)例，很實(shí)用。
tbody Tab選項(xiàng)卡效果代碼關(guān)鍵只是在<tbody>和選項(xiàng)卡的設(shè)置上。我在6個(gè)<tr></tr>段分別設(shè)置了<tbody></tbody>，目的是為了讓一個(gè)javascript程序調(diào)用6個(gè)選項(xiàng)卡的時(shí)候可以循環(huán)設(shè)置tBodies屬性。調(diào)用的時(shí)候是采用了遍歷：將6個(gè)tBodies先全部都初始化為display='none'，然后緊接著將tBodies[n]設(shè)置為display='block'，將這一個(gè)tBodies顯示出來(lái)。2008-03-03
input下的value值無(wú)法修改的解決方法2008-07-07
z-index是CSS中控制元素層級(jí)的屬性，但其工作原理并不簡(jiǎn)單。本文將深入探討z-index的工作原理，包括堆疊上下文、層疊順序和層疊上下文等概念，并介紹z-index的應(yīng)用技巧，如如何避免z-index的陷阱、如何使用z-index實(shí)現(xiàn)復(fù)雜布局等。2023-05-05
WEB標(biāo)準(zhǔn)網(wǎng)頁(yè)布局中盡量不要使用的HTML標(biāo)簽
CSS網(wǎng)頁(yè)布局中不推薦使用的HTML標(biāo)簽，請(qǐng)盡量不要使用這些HTML標(biāo)簽。2008-09-09
實(shí)用的利用 CSS + <em>標(biāo)簽 來(lái)完成一個(gè)三角形的制作
實(shí)用的利用 CSS + <em>標(biāo)簽 來(lái)完成一個(gè)三角形的制作...2007-04-04
Zen Coding css,html縮寫替換大觀 快速寫出html,css
本文是在zen使用生產(chǎn)中遇到的問題做一些分享。2011-01-01