CSS-Filter Graustufenbild für IE 10

Question

Gibt es eine Möglichkeit, Graustufenbildfilter auf IE 10 ohne JavaScript oder SVG arbeiten zu lassen? den folgenden Code erfolgreich in allen Browsern außer 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

Dieser Ansatz funktioniert nur in WebKit und Firefox

Ich habe. Es funktioniert nicht in IE oder Opera. WebKit ist derzeit der einzige Browser, der CSS-Filter unterstützt, während Firefox SVG-Filter in HTML unterstützt. Opera und IE unterstützen SVG-Filter, aber nur für SVG-Inhalte.

Es gibt keine gute Möglichkeit, dies in IE10 zu ermöglichen, da die Unterstützung für die Legacy-IE-Filter verworfen wurde. Es gibt einen Weg, aber ich würde es nicht empfehlen.

Sie IE10 festlegen können mit IE9-Standards-Modus mit dem folgenden Meta-Element im Kopf zu machen:

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

Dies wird sich Unterstützung wieder auf für ältere IE-Filter. Es hat jedoch den Nebeneffekt des Fallenlassens von IE in den IE9-Modus, wo die neuesten Fortschritte in IE10 nicht länger unterstützt werden. In Ihrem Fall ist es möglicherweise möglich, dass Sie diese neuen Funktionen derzeit nicht benötigen, aber wenn Sie diesen Weg gehen, müssen Sie sich dessen bewusst sein, wenn Sie die Website in Zukunft aktualisieren.

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/

Die obigen Links geben gute Idee für> IE10 und anderen Browsern.

Answer 3

Dies ist eine Cross-Browser-Lösung HTML5 und jQuery mit Fade-Effekt

Code

Demo