Wie erreicht man mit CSS eine Graustufenbildtransformation beim Bewegen der Maus und stellt so die Kompatibilität mit IE und Firefox sicher?

Ein Bild beim Bewegen der Maus mit CSS in Graustufen skalieren und neu einfärben

Herausforderung: Ein farbiges Symbol in Graustufen umwandeln und wiederherstellen Es wird eingefärbt, wenn die Maus darüber bewegt wird, wodurch die Kompatibilität mit IE und Firefox sichergestellt wird.

Lösungen:

1. Reines CSS (Verwendung eines einfarbigen Bildes):

Dieser Ansatz verwendet CSS-Filter, um das Bild in Graustufen umzuwandeln. Die Filtereigenschaft wird auf das img-Element mit der Klasse greyscale angewendet.

CSS:

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8,"); /* Firefox 3.5+, IE10 */
  filter: gray;                           /* IE6-9 */
  -webkit-filter: grayscale(100%);      /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}</code>

2. CSS und SVG (mit Inline-SVG):

IE10 unterstützt Inline-SVG und ermöglicht so eine sauberere Lösung. Das SVG-Bild wird mit einem feColorMatrix-Element gefiltert und der Graustufeneffekt wird angewendet, indem der Sättigungswert auf 0 gesetzt wird.

HTML:

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 377" width="400" height="377">
  <defs>
    <filter id="filtersPicture">
      <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
      <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    </filter>
  </defs>
  <image filter="url(#filtersPicture)" x="0" y="0" width="400" height="377" xlink:href="image.jpg" />
</svg></code>

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS eine Graustufenbildtransformation beim Bewegen der Maus und stellt so die Kompatibilität mit IE und Firefox sicher?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!