一直以为网站置灰，是个很简单的功能，也没有深入去看，去测试；css里面集成了一句置灰代码：html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
刚开始也很天真的认为这个代码没问题，在样式表处理完，用IE测试了下，正常，就没管！一会，用户反馈说兼容性有问题；于是快速测试，发现除了IE；火狐，谷歌，360急速模式，均无效...网上找答案，发现，这个代码只适合IE9及一下，糗了，快速找方法；最后发现的用grayscale.js，这个js，下面就把操作过程和大家分享下：
用到的代码：下面的代码，可以直接使用
<script src="/js/grayscale.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
grayscale( $("#wrap") );
});
</script>
<style>
html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}
body { background-color: #FEFFEF; filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1) }
</style>
<body id="wrap">
===========================================================================================
解释：grayscale.js 是一个置灰的类，直接百度这个js，下载之后放到对应目录就可以；
grayscale( $("#wrap") ); 定义了一个方法，方便 body调用
html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);} 一个css置灰代码；ie基本完胜
body { background-color: #FEFFEF; filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1) } 这个和上面的意思基本类似，只要是为了兼顾不同浏览器
写的比较仓促，测试也没有在深入，如果大家发现更好的办法，欢迎留言拍砖！
扫一扫
1255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
