CSS实现图片变灰色及透明度
浏览数：21 /
时间：2015年06月09日
【图片变灰】
每当遇到哀悼日，很多网站快速变灰色，来看看实现方式吧：
方式一，仅支持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高版本支持
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
