如何让你的网站变成黑白色调

星期三 2013/07/17 0:00 阅读：11841 评论：3 作者：ivan 分类：CSS、Web前端

第一次看到这个效果的时候，是在2010年4月的青海玉树7.1级地震时的网站效果。当时很多网站都有这个灰白的效果，以示哀悼。人们纷纷停止一切娱乐活动，很多游戏都暂停服务，汽车鸣笛，默哀三分钟等。

虽然这些灾难不是我们想要的，但是我们码农们能做什么，通俗的说就是为我们的网站加上灰白的效果~之前淘宝在雅安地震也应用了灰度的效果。

这次的这个代码是兼容了IE7-9（6没测）、Firefox、Chrome等浏览器，高级浏览器主要是用了CSS3的滤镜，而IE本身自己有滤镜，但是性能不好，所以不推荐使用，不过使用一两天还是没问题的。

/*网页变黑白*/

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);

}