Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie wende ich Graustufenfilter in Internet Explorer 10 an?

DDD
Freigeben: 2024-11-03 17:24:03
Original
424 Leute haben es durchsucht

How to Apply Grayscale Filters in Internet Explorer 10?

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. Dazu gehört die Verwendung eines SVG-Filters mit einer Matrix, die das Bild in Graustufen umwandelt.

CSS-Code:

<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>
Nach dem Login kopieren

Zusätzliche Überlegungen:

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

Beispiel:

<code class="css">svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}</code>
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage