今天又是全国哀悼日。汶川那次是全国人民自发的一种真实情感，但Gov把这一招用多了就不是那么一回事了，CCAV一整天在循环播放灾区感人报道，已经开始有人对这种强制行为不满了。“哀悼与否在于一个人的内心是否善良。表面上的让网页没有颜色，让视频网站不能搜索，究竟有多大意义呢？”

不过从技术上来讲，要实现网页灰度，最稳妥的办法莫过于直接处理所有图像，不用考虑兼容，不用考虑效率。但是，工作量比较大，切换回来也费力。

IE系列支持css滤镜，我在珞珈山水BBS首页上试了一下，一句 filter:gray; 就解决了所有问题。但是，众所周知，IE以效率低著名，你会发现开启以后速度显著下降。并且，最致命的，在Chrome等其他浏览器下无效。

有没有兼容所有浏览器的办法呢？有。JavaScript能做到，早就有人用js模拟了IE的gray滤镜，这里有一个demo，也可以去看看《“GRAYSCALING” IN NON-IE BROWSERS》。估计玉树那次whuyeren学长就是这么做的。这里js对不同的浏览器有区别地处理，IE（和gray滤镜下一样）将显示的灰度图片下载下来会发现仍然是彩色的，而Chrome下把图片下载下来本身就是灰度的，所以承受了比较大工作量的实时计算转化，This can really eat up the browser; even speedy JavaScript engines can suffer considerably with large images.

这个js主要做了两个方面的工作。就像作者网页里讲的，有两件事情需要处理：图片和所有其他东西。“所有其他东西”的处理比较容易，直接循环所有的elements替换掉color属性，全部转换为灰度显示。图片的问题是需要浏览器对 CanvasContext.getImageData 的支持，Chrome和低版本的Safari可能会有问题，于是就很“暴力地”一个像素一个像素地转化，这就是上面讲到Chrome下把图片下载下来本身就是灰度的原因。

还有一个问题就是对外链的图片无效，图片必须托管在同一个域名下。下面是使用方法：

1. 下载grayscale.js文件

2. 在你的header里引用这个js文件

<script type="text/javascript" src="../include/jscript/grayscale.js"></script>

3. 要实现全站灰度，在onload事件中调用

grayscale(document.body);

Update

又是地震，这回又是是四川。几年过去，HTML5 时代也到来了，下面的代码几乎可以通杀所有浏览器，方便很多

<style>
html{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
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);
}
</style>