前幾天一位做網(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">
在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:
您可能感興趣的文章:- Cross-Browser Variable Opacity with PNG
- Opacity.js
- 純JS半透明Tip效果代碼
- IE6下opacity與JQuery的奇妙結(jié)合
- 原生js實(shí)現(xiàn)半透明遮罩層效果具體代碼
- js+CSS實(shí)現(xiàn)彈出居中背景半透明div層的方法
- js和jQuery設(shè)置Opacity半透明 兼容IE6
