遇到重大事件，如东航坠机、雅安芦山地震等，为了哀悼遇难者，我们需要把网站由彩色变成灰度，那么如何实现呢？

1.技术分析

最好有统一实现，因为网站有多种颜色，不可能逐个修改之。还要兼容手机端等等。再者，变成灰度是暂时的，过一时间仍要修复之。如何实现呢？

2.解决方案

用filter过滤器来统一实现灰现，由于要统一实现，其作用域是html，非某个标签。综上，在head中加入以下代码即可（放在head中的style里）。若是多个页面，用引入的方法即可，很方便简单。代码如下：

html{   
filter: grayscale(100%);    
-webkit-filter: grayscale(100%);    
-moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%);    
-o-filter: grayscale(100%); 
filter: url("data:image/svg+xml;
utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values=\0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");  
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}

3.效果图

若对*今条头日**首页执行上述代码，效果如下：

彩色变灰度演示

4.应用范围

你所在的公司、学校等遇到重大事件，需要哀悼时。