Wie kann ich Bilder einfach nur mit HTML und CSS in Graustufen konvertieren?

Ein Bild in HTML/CSS in Graustufen konvertieren: Eine einfache Lösung

Mit Hilfe von CSS ist die Anzeige einer Farbbitmap in Graustufen möglich Filter. Dieser Ansatz bietet eine browserübergreifende Lösung und ist relativ einfach zu implementieren.

Um mithilfe von CSS einen Graustufeneffekt auf ein Bild anzuwenden, fügen Sie einfach den folgenden Code zu Ihrem Stylesheet hinzu:

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

Dieser Code konvertiert alle Bilder auf der Seite in Graustufen. Alternativ können Sie gezielt auf bestimmte Bilder abzielen:

#my-image {
  /* CSS styles */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

Um den Graustufeneffekt beim Hover zu deaktivieren, fügen Sie den folgenden Code hinzu:

#my-image:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

Mit dieser einfachen CSS-Lösung können Sie Bilder ganz einfach anzeigen in Graustufen, ohne dass komplexe Techniken wie SVG oder Canvas erforderlich sind.

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