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

【图片变灰】

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

 

方式一,仅支持ie)

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

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

body {filter:gray}

方式三,仅支持ie与chrome)

CSS实现图片变灰色及透明度
html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
CSS实现图片变灰色及透明度

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

CSS实现图片变灰色及透明度
<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>
CSS实现图片变灰色及透明度

 

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

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

【图片透明】


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

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


说明:

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

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

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

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

上一篇:JS图片延迟加载分析及简单的demo


下一篇:Metro中控件WebView访问外部的网页显示一片空白