Anwenden von Graustufenfiltern in Internet Explorer 10

Internet Explorer 10 stellt eine Herausforderung für die Anwendung von Graustufenfiltern mit herkömmlichen CSS-Methoden dar. Im Gegensatz zu früheren IE-Versionen werden DX-Filter und vorangestellte Graustufenfilter nicht mehr unterstützt.

Lösung: SVG-Overlay

Für Graustufenbilder in IE10 können Sie ein SVG verwenden Überlagerung. Dabei wird ein SVG-Filter mit einer Matrix verwendet, die das Bild in Graustufen umwandelt.

CSS-Code:

img.grayscale:hover {
    filter: url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

Zusätzliche Überlegungen:

• Die SVG-Overlay-Technik funktioniert am besten, wenn das Bild einen einfarbigen Hintergrund hat.
• Weitere Informationen zu SVG Filtereffekte in IE10, siehe: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Beispiel:

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}