IE瀏覽器的CSS濾鏡灰度圖像10

Question

有沒有一種方法可以在沒有JavaScript或SVG的情況下在IE 10上生成灰度圖像過濾器？

我已經成功地使用下面的代碼在所有瀏覽器除了IE以外10

img{ 
filter:url("data:image/svg+xml;utf8,<svg 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>#grayscale"); /*  Firefox 10+, Firefox on Android */ 
filter:gray; /* IE6-9 */ 
-webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
-moz-filter: grayscale(100%); 
-o-filter: grayscale(100%);} 

Answer 1

這種方法只適用於WebKit和Firefox瀏覽器。它在IE或Opera中不起作用。 WebKit是目前唯一支持CSS過濾器的瀏覽器，而Firefox則支持HTML上的SVG過濾器。 Opera和IE支持SVG過濾器，但僅限於SVG內容。

沒有好的方法可以在IE10中完成這項工作，因爲它放棄了對傳統IE過濾器的支持。有一種方法，但是，我不會推薦它。

您可以設置IE10使用以下元元的頭使用IE9標準模式來呈現：

<meta http-equiv="X-UA-Compatible" content="IE=9"> 

這將重新開啓對傳統IE過濾器的支持。但是，它具有將IE下降到IE9模式的副作用，IE9中的最新進展將不再受支持。在您的情況下，您可能目前不需要這些新功能，但如果沿着這條路走下去，您將來需要在更新網站時注意它。

Answer 2

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/

上面的鏈接給出> IE10和其他瀏覽器好主意。

Answer 3

這是使用HTML5和jQuery使用淡入淡出效果

Code

Demo