Wie wende ich einen Graustufenfilter auf Bilder in Internet Explorer 10 an?

Graustufenfilter in Internet Explorer 10

CSS-Filter, einschließlich Graustufen, werden häufig zur Verbesserung von Bildern in der Webentwicklung verwendet. Mit fortschreitender Technologie implementieren verschiedene Browser Filter jedoch unterschiedlich, was zu Kompatibilitätsproblemen führt.

In Internet Explorer-Versionen 9 und niedriger war die Anwendung eines Graustufenfilters über CSS mithilfe von DX-Filtern unkompliziert. Dieser Ansatz funktioniert jedoch in Internet Explorer 10 nicht mehr.

Lösung für Internet Explorer 10

Internet Explorer 10 führte SVG-Filtereffekte ein und bietet eine alternative Methode zur Graustufenkonvertierung. So wenden Sie einen Graustufenfilter mithilfe eines SVG-Overlays an:

<code class="css">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");
}</code>

Der obige CSS-Code wandelt ein Bild in Graustufen um, wenn der Benutzer mit der Maus darüber fährt. Die Filtereigenschaft verwendet ein SVG-Bild als Overlay, das einen Filtereffekt enthält, der die Farben des Bildes in Graustufen umwandelt.

Weitere Informationen

Weitere Informationen zu SVG-Filtereffekten in Internet Explorer 10 finden Sie unter Bitte beachten Sie die folgenden Ressourcen:

• [SVG-Filtereffekte in Internet Explorer 10](http://blogs.msdn.com/b/ie/archive/2011/10/14/svg- filter-effects-in-ie10.aspx)
• [Cross-Browser Image Grayscale mit CSS](http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with- css.html)
• [Vereinfachte JSFiddle](http://jsfiddle.net/KatieK/qhU7d/2/)

Das obige ist der detaillierte Inhalt vonWie wende ich einen Graustufenfilter auf Bilder in Internet Explorer 10 an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!