首页 > Web开发 > 详细

CSS实现图片变灰色及透明度

时间:2014-01-16 23:36:42      阅读:651      评论:0      收藏:0      [点我收藏+]

【图片变灰】

每当遇到哀悼日,很多网站快速变灰色,来看看实现方式吧:

 

方式一,仅支持ie)

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

方式二,适合小页面,仅支持ie)

body {filter:gray}

方式三,仅支持ie与chrome)

bubuko.com,布布扣
html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
bubuko.com,布布扣

方式四,支持所有浏览器)

bubuko.com,布布扣
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload=function(){
    grayscale(document.body);
    }
</script>
bubuko.com,布布扣

 

推荐方式:方法三 > 方法四 > 方法一 > 方法二

推荐原因:方法三虽不支持firefox,但稳定,速度快,占用资源小!

【图片透明】


接下来,来说说图片透明,直接看代码:

filter: Alpha(opacity=10);-moz-opacity:.1;opacity:0.1;


说明:

第一个属性(filter)仅支持ie;

第二个属性(-moz-opacity)对firefox低版本支持

第三个属性(opacity)对firefox高版本支持

CSS实现图片变灰色及透明度

原文:http://www.cnblogs.com/kandyvip/p/3522127.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!