Florence Maurice

Webthemen

background-blend-mode: Hintergründe mischen (CSS3)

Geschrieben am:

will it blend

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.

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:

Waldboden

Postkaten

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:

background-blend-mode color-burn

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

Verschiedene Werte für background-blend-mode

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.