Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >background-blend-mode

background-blend-mode

background-blend-mode: <Mischmodus>#

Mischt die Hintergrundebenen eines Elements untereinander – Bilder, Verläufe und die Hintergrundfarbe. Weder der Inhalt des Elements noch das, was darunter liegt, wird gemischt. Typischer Einsatz: ein Foto mit einer Farbe tönen, ohne es in einem Grafikprogramm zu bearbeiten.

Werte

  • Mischmodus – dieselben Werte wie bei mix-blend-mode: normal (Standard), multiply, screen, overlay, luminosity, color…
  • mehrere Werte – durch Kommas getrennt, in derselben Reihenfolge wie die Bilder in background-image. Ein einzelner Wert gilt für alle Ebenen.

Initialwert: normal. Vererbt: nein. Gilt für: alle Elemente.

Beispiele

Ein Foto über einer blauen Hintergrundfarbe in verschiedenen Modi:

<figure><div class="photo"></div><figcaption>normal</figcaption></figure>
<figure><div class="photo multiply"></div><figcaption>multiply</figcaption></figure>
<figure><div class="photo luminosity"></div><figcaption>luminosity</figcaption></figure>
<figure><div class="photo screen"></div><figcaption>screen</figcaption></figure>

figure {
  display: inline-block;
  margin: 0 8px 8px 0;
  vertical-align: top;
}
figcaption { font: 12px/1.6 monospace; }
.photo {
  width: 120px;
  height: 80px;
  background: #0088d1 url(/img/slider.jpg) center / cover;
}
.multiply { background-blend-mode: multiply; }
.luminosity { background-blend-mode: luminosity; }
.screen { background-blend-mode: screen; }
Ergebnis
normal
multiply
luminosity
screen

Ein zweifarbiger Verlauf über einem Foto im Modus overlay:

<div class="cover">Sommer auf der Burg</div>

.cover {
  display: flex;
  align-items: flex-end;
  max-width: 300px;
  height: 150px;
  padding: 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  background-color: #4a5240;
  background-image: linear-gradient(45deg, #e91e63, #0088d1), url(/img/slider.jpg);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}
Ergebnis
Sommer auf der Burg

Worauf Sie achten sollten

  • Jede Ebene mischt sich mit den Ebenen darunter und das unterste Bild mit der Hintergrundfarbe. Die Hintergrundfarbe selbst mischt sich mit nichts – auch nicht mit dem, was unter dem Element liegt.
  • Ein einzelnes Bild ohne Hintergrundfarbe hat nichts, womit es sich mischen könnte, und die Eigenschaft ändert nichts.
  • Auf den Inhalt des Elements (Text, verschachtelte Elemente) wirkt sie nicht. Das ganze Element mit seiner Umgebung mischt mix-blend-mode.
  • Lädt das Bild nicht, bleibt nur die Hintergrundfarbe. Wählen Sie sie so, dass der Text auch ohne Bild lesbar ist.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit Januar 2020, gilt als weithin verfügbar seit Juli 2022. Ab Version: Chrome 35, Firefox 30, Safari 8. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
mix-blend-mode
background-image
background-color
background
filter