css+filter實現簡單的圖片透明效果
來源:易賢網 閱讀:1102 次 日期:2015-01-29 15:13:39
溫馨提示:易賢網小編為您整理了“css+filter實現簡單的圖片透明效果”,方便廣大網友查閱!

完成簡單的透明度控制功能

使用filter的功能對圖片元素進行透明度控制。

支持ie8,chrome瀏覽器。

代碼如下:

<style type='text/css'>

/*透明20%*/

.opacity-20 {

filter:alpha(opacity=20); /*支持ie瀏覽器的filter*/

-webkit-filter:opacity(0.2); /*支持chrome瀏覽器filter*/

}

/*不透明*/

.opacity-100 {

filter:alpha(opacity=100);

-webkit-filter:opacity(1);

}

</style>

<script language=javascript>

function makevisible(cur,which){

//交替設置不帶透明度和帶透明度的css

//完成鼠標移進圖片則不透明顯示,鼠標移出則帶透明度顯示

if (which==0) {

cur.classname = 'opacity-100';

}else{

cur.classname = 'opacity-20';

}

}

</script>

<img src=final.bmp border=1 onmouseover=makevisible(this,0) onmouseout=makevisible(this,1) alt=>

以上就是本文的全部內容了,代碼很簡潔,實現的效果卻非常好,希望對大家能所幫助。

更多信息請查看IT技術專欄

更多信息請查看網頁制作
易賢網手機網站地址:css+filter實現簡單的圖片透明效果
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點

版權所有:易賢網