不知道還有多少人記得曾經為了悼念5·12汶川地震，很多網站都將頁面中所有的圖片以及文字變成灰色。彪叔曾經也做了一個工具“哀悼的CSS（網站變灰）2.0”，用來把網站變灰。
想想當初有多人為了這個事情而忙得不可開交，要把所有的圖片在photoshop里去色，再到樣式表中把所有的顏色值改成灰色，最后等過了時間之后又要恢復原狀。其中也有一些網站僅僅是在IE瀏覽器中用了濾鏡來解決，並沒有去處理其他瀏覽器的。
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
今天發現其實也可以讓Firefox和Chrome變成灰色，不過Opera和Safari沒成功，暫時先不理會，有一點東西就先跟大家分享。首先來看一下正常的頁面http://guangjs.com，好多漂亮的彩圖；再看一下我把源碼下載，添加了一行CSS樣式后的效果（點這里查看）。
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#grayscale);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
大面積的操作降低頁面性能是肯定的，這里分享這個也只是想跟大家說一下，最近我看到這個樣式，感覺太厲害了。在這個樣式代碼中，涉及到了一個文件，就是desaturate.svg，從文件擴展名中可以看到，利用到了SVG技術了，代碼如下：
只需要將這代碼保存為desaturate.svg，再通過url鏈接就可以了，十分簡單。在前面看到的demo頁面中是在body中增加了樣式，影響頁面中所有的元素，如果有需要的話，可以單獨設置一個公共庫中的類名來調用，如：
.pic_gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#grayscale);
filter: gray;
-webkit-filter: grayscale(1);
}
這樣操作的話，可以讓某個區域變成灰色，一切盡在你的掌握。
相關鏈接