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

will it blend?

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-mode
  • isolation
  • background-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:

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.

Kommentare sind geschlossen.