css中怎么利用filter实现图片透明效果

发布时间:2021-08-07 17:36:10 作者:Leah
来源:亿速云 阅读:180

css中怎么利用filter实现图片透明效果,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

代码如下:


<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="">

关于css中怎么利用filter实现图片透明效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

推荐阅读:
  1. 如何使用css的filter:blur实现图片的模糊效果
  2. css如何实现图片半透明效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css filter

上一篇:HTML是一种编程语言吗

下一篇:如何解决某些HTML字符打不出来的问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》