Wie kann ich in Internet Explorer 10 einen Graustufenfilter auf Bilder anwenden?

Graustufenfilter in Internet Explorer 10 anwenden: Eine detaillierte Anleitung

Internet Explorer 10 stellt eine einzigartige Herausforderung für die Anwendung von Graustufenfiltern auf Bilder dar. Im Gegensatz zu früheren IE-Versionen fehlt in IE10 die Unterstützung für DX-Filter und vorangestellte Graustufenfilter. Es gibt jedoch eine Problemumgehung, die SVG-Overlays nutzt, um den gewünschten Effekt zu erzielen.

Lösung: SVG-Overlay

Um einen Graustufenfilter in Internet Explorer 10 anzuwenden, können Sie dies tun Verwenden Sie das folgende CSS:

<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>

In diesem Code wird der Hover-Status verwendet, um den Filter beim Mouseover zu aktivieren. Die Filtereigenschaft verweist auf ein SVG-Overlay, das ein feColorMatrix-Element enthält, das die Graustufenkonvertierung angibt.

Verwendungsbeispiel:

<code class="html"><svg>
    <image href="image.jpg" class="grayscale" />
</svg></code>

Browser-Unterstützung:

Der SVG-Overlay-Ansatz wird in Internet Explorer 10 und höher unterstützt.

Zusätzliche Ressourcen:

• [Cross-Browser Bild-Graustufen mit CSS](http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)
• [SVG-Filtereffekte in IE10](http: //blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx)

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