Wie kann ich Bilder mithilfe von CSS-Filtern einfach in Graustufen konvertieren?

Bilder mithilfe von CSS-Filtern in Graustufen konvertieren

Im Bereich der Webentwicklung kann die Umwandlung eines Bildes in Graustufen eine Herausforderung darstellen. Herkömmliche Methoden mit SVG oder Canvas können zeitaufwändig sein. Mit dem Aufkommen von CSS-Filtern ist jedoch eine einfachere und browserübergreifende Lösung entstanden.

Browserübergreifende Graustufenfilterung

CSS-Filter bieten eine bequeme Möglichkeit zum Ändern das Erscheinungsbild von Elementen, einschließlich Bildern. Mit dem Filter greyscale() können Sie ein Bild in Graustufen konvertieren und so den Effekt des Entfernens von Farbinformationen nachahmen.

Um den Graustufeneffekt auf ein Bild anzuwenden, verwenden Sie die folgende CSS-Eigenschaft:

-webkit-filter: grayscale(1);
filter: grayscale(1);

Beispielcode

Bedenken Sie den folgenden HTML-Code Code:

<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Wie kann ich Bilder mithilfe von CSS-Filtern einfach in Graustufen konvertieren?" >

Um das Bild in Graustufen anzuzeigen, fügen Sie den CSS-Stil hinzu:

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

Hover Override

Um den Graustufeneffekt zu deaktivieren Beim Hover können Sie verschiedene Filterwerte angeben:

img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

Dadurch wird das Bild auf seine ursprüngliche Farbe zurückgesetzt, wenn die Maus bewegt wird schwebt darüber.

Browserkompatibilität

CSS-Filter werden in modernen Browsern unterstützt, einschließlich Webkit, Edge und Firefox 35. Allerdings ist die Unterstützung für IE6-9 begrenzt.

Das obige ist der detaillierte Inhalt vonWie kann ich Bilder mithilfe von CSS-Filtern einfach in Graustufen konvertieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!