Wie kann ich mithilfe von CSS ein Graustufenbild erstellen, das sich beim Mouseover neu einfärbt?

Bild-Graustufen mit CSS & Amp; Bei Mausbewegung neu einfärben

In diesem Beitrag untersuchen wir, wie Sie diesen Effekt erzielen und browserübergreifende Kompatibilität gewährleisten können.

Reines CSS (Nur ein farbiges Bild verwenden)

Für die erste Methode verwenden wir reines CSS und nur ein Bild:

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

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

Verwendung von SVG

Diese Methode verwendet Inline-SVG, um den Graustufeneffekt und ein separates Bild dafür zu erstellen die Farbversion:

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

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  ...
  <image filter="url(&quot;#filtersPicture&quot;)" ... />
   </svg></code>

JavaScript

Schließlich können wir JavaScript verwenden, um die Bildquelle beim Schweben zu ändern:

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

<code class="js">const grayscaleImages = document.querySelectorAll('.grayscale');

grayscaleImages.forEach(image => {
  image.addEventListener('mouseover', () => {
    image.src = 'path/to/color_image.jpg';
  });

  image.addEventListener('mouseout', () => {
    image.src = 'path/to/grayscale_image.jpg';
  });
});</code>

Diese Methoden bieten browserübergreifende Kompatibilität und ermöglichen Ihnen das einfache Hinzufügen von Graustufen- und Hover-Effekten zu Ihren Bildern.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS ein Graustufenbild erstellen, das sich beim Mouseover neu einfärbt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!