CSS: Grayscale Filter: Bunte Bilder mit HTML in schwarz weiß anzeigen

Tipp: So sieht das Bild ohne CSS Filter aus!

Für manche Effekte braucht man kein Bildbearbeitungsprogramm: Mit den CSS Filtern können die Browser viele Effekte selber darstellen – und das, ohne das ursprüngliche Bild zu verändern. Einer dieser Effekte ist der grayscale Filter: Damit wird aus einem bunten Bild eine schicke schwarz-weiß Grafik.

Das einfärben des Bildes funktioniert dabei nicht nur mit Bildern, die direkt (als <img>) eingebunden werden, sondern auch für Bilder, die in einem anderen Element als Hintergrundbild per CSS (background-image) eingebunden sind.

Der CSS Befehl hierfür lautet:

filter: grayscale(100%);

Damit wird das Bild komplett in Graustufen / schwarz weiß dargestellt, ohne dass das Bild vorher bearbeitet werden muss. Die Prozentanzahl in Klammern beschreibt, wie stark die Sättigung (die Farben) in dem Bild noch dargestellt werden – oder ob es komplett schwarz weiß angezeigt werden soll. Mit einem “filter: grayscale(30%);” würde das Bild stattdessen noch leicht farbig wirken.

Damit der Schwarz-Weiß-Filter auch mit allen kompatiblen Browsern funktioniert, sollte man zusätzlich zu dem offiziellen CSS Befehl noch die speziellen Befehle für die einzelnen Browser angeben:

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);

Damit das Bild dann auch in schwarz-weiß angezeigt wird, kann man die CSS Befehle in einer Klasse definieren oder dem Bild direkt zuweisen:

<img src="css-grayscale-schwarz-weiss.jpg" 
style="
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);">