Ein schönes neues CSS3-Feature sind die Blendmodi oder Mischmodi. Damit sind Effekte ermöglicht, die man sonst nur von Bildbearbeitungssoftware kennt. In der entsprechenden Spezifikation Compositing und Blending finden sich drei neue CSS-Eigenschaften:
mix-blend-modeisolationbackground-blend-mode
Sehen wir uns im ersten Teil einer kleinen Artikelserie background-blend-mode an. Im zweiten Teil der Serie geht es dann um mix-blend-mode.
Es hat die beste Browserunterstützung: Die Eigenschaft funktioniert in Firefox ab Version 30, in Chrome ab Version 35 und in Opera ab 22. Über background-blend-mode steuert man die Vermischung von Hintergrundbildern mit Hintergrundbildern oder Farben.
Nehmen wir ein Element mit zwei Hintergrundbildern – im Beispiel ein Waldboden und ein Bild eines Postkastens:
background-image: url('waldboden.jpg'), url('postkasten.jpg');
Einzeln sehen diese Bilder folgendermaßen aus:
Dann kann man mit background-blend-mode festlegen, wie diese beiden Hintergrundbilder vermischt werden sollen, z.B. so:
background-blend-mode: color-burn;
Das Ergebnis sieht dann so aus:
Neben dem gerade benutzten color-burn gibt es eine Reihe von weiteren möglichen Werten, im Einzelnen:
multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Alle Möglichkeiten zeigt der folgende Screenshot
Und hier ist das Beispiel mit den verschiedenen Werten bei background-blend-mode live zum Austesten – es funktioniert in Firefox ab Version 30, im aktuellen Chrome und Opera.
Im zweiten Teil der Artikelserie geht es um die Eigenschaft mix-blend-mode.