一、前言
在很多時候我們需要把整個網站變灰，比如“汶川地震”。近日受降雨影響四川茂縣突發山體高位垮塌，想起了曾經的汶川地震。來看看網站是如何實現整體變灰的。
二、CSS3 filter(濾鏡) 屬性
html{
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
瀏覽器支持：
grayscale()：
將圖像轉換為灰度圖像。值定義轉換的比例。值為100%則完全轉為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0。
來看一下效果：
可以看到，網頁中的圖片、css樣式、視頻都已經變灰。
三、IE瀏覽器
上面所說的css3屬性IE瀏覽器並不支持，其實這樣做已經覆蓋了大部分瀏覽器
filter: gray;
這個屬性直接加載html上是不管用的，如果需要圖片變灰可以只將樣式作用於img標簽，或者用*通配符作用於所有元素，這樣整個網站就會變灰。
經測試，在IE7-9都是沒問題的，IE9以上不能生效。
四、通用方案
如果你執意所有的瀏覽器都有這個效果，可以通過Greyscale.js實現：
在頁面引入js文件：
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
然后：
grayscale(document.getElementsByTagName("img"));
或者直接這樣：
grayscale(document.getElementsByTagName("html"));
實現原理：IE瀏覽器下是添加灰度濾鏡，這個大家都懂的。其他瀏覽器貌似使用Canvas中的getImageData方法，然后對每個像素點進行灰度轉換。
因此，在現代瀏覽器下，對於該方法，圖片的灰度處理有兩個局限性：
1. 速度。300*300這張一般般大小的圖片變灰就要數秒之久；
2. 跨域。安全性機制，無法轉換跨域的圖片為黑白色。