遇到重大事件,如东航坠机、雅安芦山地震等,为了哀悼遇难者,我们需要把网站由彩色变成灰度,那么如何实现呢?
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.应用范围
你所在的公司、学校等遇到重大事件,需要哀悼时。