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

【图片变灰】

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

 

方式一，仅支持ie）

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

方式二，适合小页面，仅支持ie）

body {filter:gray}

方式三，仅支持ie与chrome）

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

方式四，支持所有浏览器）

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

 

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

推荐原因：方法三虽不支持firefox，但稳定，速度快，占用资源小！

【图片透明】

接下来，来说说图片透明，直接看代码：

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

说明：

第一个属性（filter）仅支持ie;

第二个属性（-moz-opacity）对firefox低版本支持

第三个属性（opacity）对firefox高版本支持

 

转载于:https://www.cnblogs.com/kandyvip/p/3522127.html