小tip: 使用CSS將圖片轉換成黑白(灰色、置灰)
by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2547
//zxx: 最近很積極地折騰手機頁面的些東西，加上其他一些人生重要的事，所以木有更新。
可能早就知道，像汶川這種糟糕的日子網站全灰在IE下是可以輕松實現的(filter: gray;)，不過，當時，其他瀏覽器是無解的。不過，時代發展，如今，CSS3的逐步推進，我們也開始看到“黑白效果”大規模應用於實際的可能。
CSS3 greyscale 濾鏡實現
如下測試代碼：
.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }
HTML代碼：
<img src="mm1.jpg" /> <img src="mm1.jpg" class="gray" />
如果你手上的瀏覽器是Chrome18+, 您可以狠狠地點擊這里：CSS3 greyscale 濾鏡與照片黑白
可以看到類似文章一開始展示的黑白對比效果圖。
其他些瀏覽器，如FireFox很快就會跟上實現。當然，要實現（比方說）FireFox 4瀏覽器上照片變黑白的效果，也是可以的。可以使用SVG的灰度濾鏡效果。
SVG濾鏡實現
我們新建一個空白文本文件，比如說：gray.txt. 拷貝進去如下的XML代碼：
<svg version="1.1" 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>
然后，修改后綴.txt → .svg. 然后就可以調用了~~
如下CSS調用代碼：
filter: url(gray.svg#grayscale);
然后，效果就出來了。如果你手上的瀏覽器是FireFox4+，您可以狠狠地點擊這里：SVG濾鏡實現照片黑白demo
別忘了IE瀏覽器
IE下實現上面已經提過，就是：
filter: gray;
至少IE7~9都是支持的。最近較懶，IE6懶得去測，支持與否不知。經驗來看，應該是支持的。
我需要一個一統江山的方法
一統江山（完全兼容），如果單純想通過CSS，也是可以的，你所要做的就是：天天拿個魚竿去黃浦江釣魚，年復一年，日復一日……然后，兩年后，只要兩年，把上面兩個demo頁面F5一下，就可以了！很簡單吧！
如果嫌上面的做法過於倫敦，且你也不是一根筋，到是有個一統江山的方法，不過不是CSS的干貨，一個貌似有點名氣的Greyscale.js。
用法很簡單，引用JavaScript文件，如下：
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
然后，一句話：
grayscale(document.getElementById("thisImage"));
或DOM元素集：
grayscale(document.getElementsByTagName("img"));
如果你喜歡使用jQuery，還可以使用：
grayscale($("#thisImage"));
很簡單吧。
實現原理：IE瀏覽器下是添加灰度濾鏡，這個大家都懂的。其他瀏覽器貌似使用Canvas中的getImageData方法，然后對每個像素點進行灰度轉換~~
因此，在現代瀏覽器下，對於該方法，圖片的灰度處理有兩個局限性：
1. 速度。300*300這張一般般大小的圖片變灰就要數秒之久；
2. 跨域。安全性機制，無法轉換跨域的圖片為黑白色。
您可以狠狠地點擊這里：Greyscale.js照片變灰兼容性實現demo
截圖跟上面的一致，略。
原創文章，轉載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
http://www.zhangxinxu.com/wordpress/?p=2547
另一個解釋型網站：https://www.qdfuns.com/article/46690/88ba2e450e82c33d2c9651bdff0fd716.html