今天又是全國哀悼日。汶川那次是全國人民自發的一種真實情感，但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>