Wie kann ich ein Farbbild nur mit HTML und CSS in Graustufen konvertieren?

Konvertieren eines Bilds in Graustufen mithilfe von HTML/CSS

Mit dieser Frage soll eine mühelose Methode zum Anzeigen eines farbigen Bitmap-Bilds ausschließlich in Graustufen untersucht werden durch HTML und CSS. Ziel ist es, die Komplexität der Verwendung von SVG oder Canvas zu vermeiden und eine Lösung zu finden, die mit Firefox 3 und Safari 3 oder höher kompatibel ist.

Glücklicherweise hat das Aufkommen von CSS-Filtern in Webkit eine browserübergreifende Lösung bereitgestellt für diese Aufgabe. Der folgende Codeausschnitt veranschaulicht, wie Sie den gewünschten Graustufeneffekt erzielen:

<img src="image.png">

Die Filtereigenschaft wird von Internet Explorer 6-9 und Microsoft Edge unterstützt, während die Eigenschaft -webkit-filter von Google Chrome unterstützt wird. Safari 6 und Opera 15.

Um den Graustufeneffekt beim Schweben zu deaktivieren, können die folgenden CSS-Regeln gelten angewendet:

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

Diese einfache Lösung ermöglicht die Konvertierung von Farbbildern in Graustufen in HTML/CSS, ohne dass zusätzlicher Overhead von SVG oder Canvas erforderlich ist.

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