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

HTML代碼：


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


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

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

最新評(píng)論