突然想起写这篇文章是因为，公司的产品大早上打电话说：“赶紧，业务刚通知，我们的官网、小程序、公众号的首页需要变为灰色背景，最好在10点半之前上线”。当时心有千般不愿，但最后生活压倒我坚硬的脊梁。哈哈哈，闲话少说~
一、为啥要用整体变为灰色背景
在特殊的日子，比如清明、国家公祭日、大的自然灾害发生、国家的重要领导去世等等一些悲痛的日子，从国家报道到公司网站到个人，为表示我们对逝者的悼念，都会让网站的全部网页变成灰色（黑白色）。
例如：
二、实现方法
1、CSS方法
在页面html标签添加行内样式，或者在css文件中，或者在head标签中添加都可以。原理就是采用了ie的滤镜方法，和css提供的grayscale()方法，感兴趣的话大家可以去查查资料~哈哈
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"><title></title></head><body><div id="app"></div></body></html>
大部分的浏览器都会支持css filter
img{-webkit-filter: grayscale(100%); /* CSS3 filter方式，webkit内核方式，firefox外的绝大部分的现代浏览器*/-moz-filter: grayscale(100%); /* 没有实现 */-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%); /* CSS3 filter方式，标准写法*/filter: url(filters.svg#grayscale); /* Firefox 4+ */filter: gray; /* IE 6-9 */}img:hover{-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-ms-filter: grayscale(0%);-o-filter: grayscale(0%);filter: grayscale(0%);filter: none; /* Firefox 4+, IE 6-9 */}
2、js方法
加入大神的集成js插件--->grayscale.js插件
下载链接-->/js/gray_baiwanzhan.js
局限性的话就是对于高版本的Safari 4和Chrome可能不会适用（不支持CanvasContext.getImageData）具体没去验证
window.οnlοad = function(){grayscale(document.body);}//或window.οnlοad = function(){grayscale(document.getElementsByTagName("img"));}//或$(function(){grayscale($("#g"));})
3、针对ie10\11大家可以参考作者whqet的文章，里边很详细的介绍了如何解决这个问题，文章的传送门我已经放在下边了，感兴趣的同学可以去看看~
跨浏览器图像灰度(grayscale)解决方案_whqet的博客-CSDN博客_gray scale jpeg 资源实现图像灰度（grayscale）最初有ie4推出的专属属性filter实现，后来在css3里w3c实现了标准的filter，不过不同浏览器的实现程度不一样，因此现阶段我们必须探索一种浏览器兼容的解决方案。/whqet/article/details/22737149
