Kann ich Bilder nur mit HTML und CSS in Graustufen konvertieren?

Bilder in Graustufen mit HTML/CSS konvertieren

Frage:

Gibt es eine einfache Lösung Methode zum Anzeigen einer Farbbitmap in Graustufen ausschließlich mit HTML/CSS, ohne die Komplexität von SVG oder zu übernehmen Canvas?

Antwort:

Mit dem Aufkommen von CSS-Filtern in Webkit ist eine browserübergreifende Lösung entstanden. Unten finden Sie den Code, der die Graustufentransformation ermöglicht:

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

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

Zur Veranschaulichung hier ein Beispiel-HTML-Code:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">

Durch die Anwendung dieser Technik auf ein Bild wird es in Graustufen konvertiert und bietet ein einfache und effektive Lösung für die monochromatische Bilddarstellung.

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