CSS实现页面全灰色（悼念日特效 ）

今天一个朋友问我，如何在不大量修改原始页面的状态下，如何实现网页变成全灰色呢？就是像2012年在汶川大地震发生的适合，国内很多站点都把自己的站点标称了灰色，无论是图片还是页面，如下图：

其实实现这样的效果只需要几行代码就可以，如下：

html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: url("data:image/svg+xml;utf8,#grayscale");filter: gray;filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

把上面这段代码到你的全局CSS里就可以实现全站灰色的效果。当然还有不少方法实现，但是这种CSS方法是兼容性理想了。