整站灰黑肃穆色调css处理

我们在实际项目中经常遇到需要整站临时处理为灰黑基调的时候，比如国家公祭日，比如某些特定要求，这时候我们只需要简单几步就可以完成处理：

1、在css中加入

body{
    filter: grayscale(100%);/*火狐*/
    -webkit-filter:grayscale(100%);/*chrome*/
    filter:gray; /*IE6-9*/	
}

这个基本就兼容了出去ie10和ie11之外的所有现代浏览器，不过要说明一下：此代码不处理背景图片，也就是如果你的body设置了背景图片。是不会变灰黑色的，需要你针对背景单独处理下。然后在ie6-9会有一些图片或者背景也不会变色，这种需要自己写hack处理，比如我写的

<!--[if gte IE 6]> 
<style type="text/css">
img{filter:gray;} /* 针对图片不变灰处理 */
</style>
<![endif]-->

if gte IE 6是只支持ie6以上，然后ie10以上不支持if模式，所以这里实际上就是支持ie6到9。

2、现在重点说下兼容ie10和ie11，这2个版本很奇葩不支持filter，所以处理起来有点麻烦。需要引入一个grayscale.js。注意，js放在< /body >之前，代码如下

<script type="text/javascript" src="js/grayscale.js"></script>
<script type="text/javascript">
  var navStr = navigator.userAgent.toLowerCase();
  if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11
      grayscale(document.body);
  }
</script>

这样基本就完成了浏览器的全部兼容，如果需要对ie10和ie11进行css单独调用，可以用媒体查询功能，如下

@media all and (-ms-high-contrast:none), (-ms-high-contrast:active) {
 //您的代码//支持ie10和ie11
} 

代码这里基本就完成了，但是使用grayscale.js后，对性能影响较大，我实际测试，通过ie10和ie11访问网站，需要卡2到3秒才能显示页面，所以为了兼容ie10和ie11，是否需要引入此js，需要见仁见智了，最后再说一句，ie垃圾！！！

最近又需要这个了，发现一个新代码，纯css，不错

 	html {
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter: grayscale(100%);
	}
	
	html{
	filter: grayscale(100%);
		 
		  /* webkit内核 */
		 
		  -webkit-filter: grayscale(100%);
		 
		  /* 火狐内核 */
		 
		-moz-filter: grayscale(100%);
		 
		  /* 微软内核 */
		 
		  -ms-filter: grayscale(100%);
		 
		  /* 欧朋内核 */
		 
		  -o-filter: grayscale(100%);
		 
		  /* ie专有滤镜 */
				
				filter:gray;
	} 

有个奇怪的问题在ie8和ie9下，有一些图片背景不会变色，在网上看到这个代码加通配符的样式，试了下，确实可以

// 在样式最上加上“*”通配样式
*{
   -webkit-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}