可能早就知道，像汶川這種糟糕的日子網(wǎng)站全灰在IE下是可以輕松實(shí)現(xiàn)的(filter: gray;)，不過，當(dāng)時(shí)，其他瀏覽器是無解的。不過，時(shí)代發(fā)展，如今，CSS3的逐步推進(jìn)，我們也開始看到“黑白效果”大規(guī)模應(yīng)用于實(shí)際的可能。
 
CSS3 greyscale 濾鏡實(shí)現(xiàn)
如下測試代碼：

HTML代碼：


如果你手上的瀏覽器是Chrome18+, 您可以狠狠地點(diǎn)擊這里：CSS3 greyscale 濾鏡與照片黑白?
可以看到類似文章一開始展示的黑白對比效果圖。
其他些瀏覽器，如FireFox很快就會跟上實(shí)現(xiàn)。當(dāng)然，要實(shí)現(xiàn)（比方說）FireFox 4瀏覽器上照片變黑白的效果，也是可以的?？梢允褂肧VG的灰度濾鏡效果。
SVG濾鏡實(shí)現(xiàn)
我們新建一個空白文本文件，比如說：gray.txt. 拷貝進(jìn)去如下的XML代碼：


然后，修改后綴.txt → .svg. 然后就可以調(diào)用了~~

如下CSS調(diào)用代碼：
filter: url(gray.svg#grayscale);然后，效果就出來了。如果你手上的瀏覽器是FireFox4+，您可以狠狠地點(diǎn)擊這里：SVG濾鏡實(shí)現(xiàn)照片黑白demo?
別忘了IE瀏覽器
IE下實(shí)現(xiàn)上面已經(jīng)提過，就是：
filter: gray;至少IE7~9都是支持的。最近較懶，IE6懶得去測，支持與否不知。經(jīng)驗(yàn)來看，應(yīng)該是支持的。
我需要一個一統(tǒng)江山的方法
一統(tǒng)江山（完全兼容），如果單純想通過CSS，也是可以的，你所要做的就是：天天拿個魚竿去黃浦江釣魚，年復(fù)一年，日復(fù)一日……然后，兩年后，只要兩年，把上面兩個demo頁面F5一下，就可以了！很簡單吧！
如果嫌上面的做法過于倫敦，且你也不是一根筋，到是有個一統(tǒng)江山的方法，不過不是CSS的干貨，一個貌似有點(diǎn)名氣的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"));很簡單吧。
實(shí)現(xiàn)原理：IE瀏覽器下是添加灰度濾鏡，這個大家都懂的。其他瀏覽器貌似使用Canvas中的getImageData方法，然后對每個像素點(diǎn)進(jìn)行灰度轉(zhuǎn)換~~
因此，在現(xiàn)代瀏覽器下，對于該方法，圖片的灰度處理有兩個局限性：
1. 速度。300*300這張一般般大小的圖片變灰就要數(shù)秒之久；
2. 跨域。安全性機(jī)制，無法轉(zhuǎn)換跨域的圖片為黑白色。

最新評論