本文给大家介绍的是CSS结合filter实现简单的图片透明效果的实例,主要使用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="">
以上就是本文的全部内容了,代码很简洁,实现的效果却非常好,希望对大家能所帮助。 |