Wie kann ich mit CSS ein Graustufenbild erstellen, das beim Mouseover seine Farbe ändert?

Bild-Graustufen mit CSS und Neufärbung bei Mouse-Over

Sie können Bild-Graustufen mit CSS erreichen und bei Maus-Over neu einfärben. über die Verwendung mehrerer Methoden. Hier ist eine Übersicht:

Reines CSS (Verwendung eines einfarbigen Bildes)

Verwenden Sie CSS-Filter, um das Bild in Graustufen umzuwandeln und den Effekt beim Mouseover zu entfernen:

<code class="css">img.grayscale {
  filter: grayscale(100%);
}

img.grayscale:hover {
  filter: none;
}</code>

Kombination aus CSS und JavaScript

Erstellen Sie ein Graustufenbild und ein Farbbild und schalten Sie deren Sichtbarkeit bei Mouse-in- und Mouse-out-Ereignissen um:

<code class="css">img.grayscale {
  opacity: 1;
}

img.colored {
  opacity: 0;
}</code>

<code class="js">document.querySelector('img').addEventListener('mouseover', () => {
  document.querySelector('img.colored').style.opacity = 1;
  document.querySelector('img.grayscale').style.opacity = 0;
});

document.querySelector('img').addEventListener('mouseout', () => {
  document.querySelector('img.colored').style.opacity = 0;
  document.querySelector('img.grayscale').style.opacity = 1;
});</code>

SVG-Filter verwenden (nur IE10)

Verwenden Sie Inline-SVG mit Filtern, um einen Sättigungseffekt anzuwenden und ihn bei Mouseover zu ändern:

<code class="html"><svg>
  <defs>
    <filter id="grayscale">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image filter="url(#grayscale)" ... />
</svg></code>

Durch Anpassen des Sättigungswerts können Sie die Graustufenstufe steuern. Diese Methode wird in IE10 und höher unterstützt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS ein Graustufenbild erstellen, das beim Mouseover seine Farbe ändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!