2013-08-05 22 views
3

在我的web應用程序中,我需要去飽和/灰度化一些圖片。我使用下面的CSS來實現這一目標:如果css無法處理圖像,jQuery後退

.grayscale { 
    filter: grayscale(100%); /* Current draft standard */ 
    -webkit-filter: grayscale(100%); /* New WebKit */ 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
    -webkit-filter: grayscale(1); /* Old WebKit */ 
} 

這涵蓋了廣泛的瀏覽器的陣列。問題在於一些像Safari 5這樣的老版本不受它的影響。我知道像Pixastic這樣的jQuery庫支持那些較舊的瀏覽器,但我希望儘可能少地使用jQuery來儘可能快地加載我的頁面。因此,我的問題是:有可能檢查圖像是否灰度,如果不是,請使用像Pixastic這樣的jQuery插件來做到這一點?

+0

的可能重複的[Modernizr的檢查灰度濾波器IE 10](http://stackoverflow.com/questions/16150423/modernizr-check-for-grayscale-過濾器 - 即10) - 不同的問題,但同樣的解決方案。 – FakeRainBrigand

回答