css實現圖片半透明效果的方法:可以通過opacity屬性來進行設定,如【style="-moz-opacity:0.5";】。opacity屬性用來設定元素的不透明級別,語法為【opacity:value|inherit;】。
本文環境:
windows10、css3
適用於所有品牌的電腦
屬性介紹:
opacity 屬性設定元素的不透明級別。
(學習視訊分享:)
語法:
opacity: value|inherit;
屬性值:
value 規定不透明度。從 0.0 (完全透明)到 1.0(完全不透明)。
inherit 應該從父元素繼承 opacity 屬性的值。
實現程式碼如下:
這個效果在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"來定義透明度"opacity",而在Mozilla中是可以直接解析"opacity",所以如果要使得這個效果在兩種瀏覽器中都得到支援,需要把兩種設定都加進去。
針對IE的設定:this.filters.alpha.opacity=50;針對Mozilla的設定:this.style.MozOpacity=0.5。
相關推薦:
以上就是css怎麼實現圖片半透明效果的詳細內容,更多請關注TW511.COM其它相關文章!