有一天，公司美工说：“想把公司所有网站色调统一”，公司程序员说：“这个简单，只要一个代码就好了”，于是。。。。。全公司网页变成灰白色调的那种哀悼风格的界面了。

当然，这不是一个笑话，这是真实事件。囧。

下面来分享下使网站变成灰白色调，哀悼风格界面的代码：

html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}

这是从网上搜集到的所有代码中整理得出的兼容性稍微好点的代码，因为之前搜集的代码，有些不顶用，有些虽说是兼容性最佳的却连部分IE都没有其效果。经过几番测试和寻找，得出以下结论：

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
这段代码是兼容IE7~~IE9的代码。

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

这段代码使用的是CSS3的grayscale滤镜

上面的几段代码已经能适应到大部分浏览器了，但是唯独IE10、IE11还是不兼容，下面要解决适应IE10/IE11、Opera等浏览器中运行的话，就要借助到Jquery的插件grayscale.js了。

通过利用onload执行方法grayscale(document.html)来达成全网页的灰度特效了，但是这种方法对资源消耗很高，所以也是很难抉择是否使用的一种方法。