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%);">