background-blend-mode: Hintergründe mischen (CSS3)
Geschrieben am:
Ein schönes 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-mode
isolation
background-blend-mode
Sehen wir uns im ersten Teil einer kleinen Artikelserie background-blend-mode
](../background-blend-mode-hintergruende-mischen-css3/ "background-blend-mode: Hintergründe mischen (CSS3)") 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.