background-blend-mode Demo

Mit background-blend-mode werden mehrere Hintergrundbilder miteinander verrechnet. Die Beispiele zeigen zwei JPGs sowie ein transparentes PNG und ein PNG mit weissem Hintergrund, jeweils kombiniert mit einem CSS-Gradienten. Die Unterschiede der einzelnen Blend Modes werden direkt sichtbar.

Schau genau hin: Manche Modi sehen bei hellen/unsaturierten Bildern zum Verwechseln ähnlich aus – erst der direkte Vergleich zeigt den Unterschied.

  • multiply vs. darken – auf weissen Flächen praktisch identisch.
  • lighten vs. color-dodge – bei reinem Schwarz-Weiss kaum zu unterscheiden, bei Graustufen schon.
  • saturation vs. color – wirken bei unsaturierten (Schwarz-Weiss/Grau) Bildern fast gleich, weil beiden Formeln die Farbe zum Übertragen fehlt.

Beispiel 1

Zwei Hintergundbilder im JPG Format, beide haben einen weissen Background.

background-blend-mode:normal; (default)
background-blend-mode:multiply;
background-blend-mode:screen;
background-blend-mode:overlay;
background-blend-mode:darken;
background-blend-mode:lighten;
background-blend-mode:color-dodge;
background-blend-mode:color-burn;
background-blend-mode:hard-light;
background-blend-mode:soft-light;
background-blend-mode:exclusion;
background-blend-mode:hue;
background-blend-mode:saturation;
background-blend-mode:color;
background-blend-mode:luminosity;
background-blend-mode:difference;

Beispiel 2

Ein Graustufen Hintergundbild im JPG Format und ein CSS Gradient als Background Image.

background-blend-mode:normal; (default)
background-blend-mode:multiply;
background-blend-mode:screen;
background-blend-mode:overlay;
background-blend-mode:darken;
background-blend-mode:lighten;
background-blend-mode:color-dodge;
background-blend-mode:color-burn;
background-blend-mode:hard-light;
background-blend-mode:soft-light;
background-blend-mode:exclusion;
background-blend-mode:hue;
background-blend-mode:saturation;
background-blend-mode:color;
background-blend-mode:luminosity;
background-blend-mode:difference;

Beispiel 3

Ein PNG,welches teilweise transparent ist. Ein CSS Gradient als Background Image.

background-blend-mode:normal; (default)
background-blend-mode:multiply;
background-blend-mode:screen;
background-blend-mode:overlay;
background-blend-mode:darken;
background-blend-mode:lighten;
background-blend-mode:color-dodge;
background-blend-mode:color-burn;
background-blend-mode:hard-light;
background-blend-mode:soft-light;
background-blend-mode:exclusion;
background-blend-mode:hue;
background-blend-mode:saturation;
background-blend-mode:color;
background-blend-mode:luminosity;
background-blend-mode:difference;

Beispiel 4

Ein PNG mit weissem Background und ein CSS Gradient als Background Image.

background-blend-mode:normal; (default)
background-blend-mode:multiply;
background-blend-mode:screen;
background-blend-mode:overlay;
background-blend-mode:darken;
background-blend-mode:lighten;
background-blend-mode:color-dodge;
background-blend-mode:color-burn;
background-blend-mode:hard-light;
background-blend-mode:soft-light;
background-blend-mode:exclusion;
background-blend-mode:hue;
background-blend-mode:saturation;
background-blend-mode:color;
background-blend-mode:luminosity;
background-blend-mode:difference;

Copyright / Bildnachweis
© Daniel Müller. Die Bilder werden mit freundlicher Genehmigung für diese Demo verwendet.
illumueller.ch

Daniel Müller
Daniel Müller

Nurse Probier alle Blend Modes live im Playground aus oder lies die Blend Mode Lektion.