Heim > Web-Frontend > CSS-Tutorial > Wie kann ich Bilder mithilfe von CSS-Filtern einfach in Graustufen konvertieren?

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

Susan Sarandon
Freigeben: 2024-12-15 02:09:09
Original
420 Leute haben es durchsucht

How Can I Easily Convert Images to Grayscale Using CSS Filters?

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

Beispielcode

Bedenken Sie den folgenden HTML-Code Code:

<img src="image.jpg">
Nach dem Login kopieren

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

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
Nach dem Login kopieren

Hover Override

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

img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}
Nach dem Login kopieren

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!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage