突然想起写这篇文章是因为，公司的产品大早上打电话说：“赶紧，业务刚通知，我们的官网、小程序、公众号的首页需要变为灰色背景，最好在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插件
下载链接-->http://cn.baiwanzhan.com/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"));
})