使用CSS將圖片轉換成黑白的

時代發展，如今，CSS3的逐步推進，我們也開始看到「黑白效果」大規模應用於實際的可能,接下來介紹CSS3 greyscale 濾鏡實現，感興趣的朋友可以了解下 可能早就知道，像汶川這種糟糕的日子網站全灰在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="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   / alt="使用CSS將圖片轉換成黑白的" > 
<img  class="gray lazy"  src="/static/imghwm/default1.png"  data-src="mm1.jpg"    / alt="使用CSS將圖片轉換成黑白的" >

如果你手上的瀏覽器是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文件，如下：
然後，一句話：
grayscale(document.getElementById("thisImage"));或DOM元素集：
grayscale(document.getElementsByTagName("img"));如果你喜歡使用jQuery，還可以使用：
grayscale($("#thisImage"));很簡單吧。
實作原理：IE瀏覽器下方是加入灰階濾鏡，這個大家都懂的。其他瀏覽器似乎使用Canvas中的getImageData方法，然後對每個像素點進行灰階轉換~~

因此，在現代瀏覽器下，對於該方法，圖片的灰階處理有兩個限制： # ##1. 速度。 300*300 這張一般大小的圖片變灰就要數秒之久； ###2. 跨域。安全性機制，無法轉換跨域的圖片為黑白色。 ###

以上是使用CSS將圖片轉換成黑白的的詳細內容。更多資訊請關注PHP中文網其他相關文章！