CSS background-blend-mode Eigenschaft

Die CSS-Eigenschaft background-blend-mode legt fest, wie die Hintergrundbilder eines Elements miteinander und mit der background-color des Elements gemischt werden. Sie ermöglicht es, überlagerte Hintergründe so zu kombinieren, wie Bildbearbeitungsprogramme Ebenen mischen — ein Foto einfärben, einen Duoton-Effekt erzeugen oder eine Textur in eine andere übergehen lassen — ohne die Bilddateien selbst zu verändern.

Diese Seite erklärt, was jeder Blend-Modus bewirkt, wie das Mischen funktioniert, wenn ein Element mehrere Hintergrundebenen hat, reale Anwendungsfälle und ausführbare Beispiele. Der Standardwert ist normal, was bedeutet, dass kein Mischen stattfindet.

Eigenschaftsreferenz


Anfangswert	`normal`
Gilt für	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Nein
Animierbar	Nein
Version	CSS3
DOM-Syntax	`object.style.backgroundBlendMode = "luminosity"`

Syntax

background-blend-mode: <blend-mode>;

/* Multiple layers */
background-blend-mode: <blend-mode>, <blend-mode>, ...;

Dabei ist <blend-mode> eines der Folgenden:

normal | multiply | screen | overlay | darken | lighten |
color-dodge | color-burn | hard-light | soft-light |
difference | exclusion | hue | saturation | color | luminosity

Wie das Mischen mit mehreren Ebenen funktioniert

Ein Element kann mehrere Hintergrundebenen stapeln: die background-image-Liste sowie die background-color, die unterhalb aller anderen gemalt wird. background-blend-mode akzeptiert eine kommagetrennte Liste von Modi, die der Reihe nach den background-image-Ebenen entsprechen:

Wenn Sie weniger Modi als Ebenen angeben, wiederholt sich die Liste von Beginn an, bis jede Ebene einen Modus hat.
Wenn Sie mehr Modi als Ebenen angeben, werden die überzähligen Modi ignoriert.
Die background-color ist immer die unterste Ebene und wird mit der direkt darüber liegenden Bildebene gemischt.

/* Two images: the first uses "screen", the second "multiply" */
background-image: url(top.png), url(bottom.png);
background-blend-mode: screen, multiply;

Das Mischen findet nur zwischen den Hintergründen desselben Elements statt — es findet kein Mischen mit Inhalten statt, die im Stapelkontext hinter dem Element sichtbar sind. Um ein Element mit dem dahinter liegenden Inhalt auf der Seite zu mischen, verwenden Sie stattdessen mix-blend-mode.

Werte

Wert	Funktion
`normal`	Kein Mischen — die oberste Ebene übermalt die darunter liegenden Ebenen (Standard).
`multiply`	Multipliziert die Farbkanalwerte. Das Ergebnis ist immer dunkler; Weiß wird transparent, Schwarz bleibt Schwarz.
`screen`	Das Gegenteil von `multiply`. Das Ergebnis ist immer heller; Schwarz wird transparent, Weiß bleibt Weiß.
`overlay`	Wendet `multiply` an, wo die untere Ebene dunkel ist, und `screen`, wo sie hell ist — erhöht den Kontrast.
`darken`	Behält den jeweils dunkleren Pixel, Kanal für Kanal.
`lighten`	Behält den jeweils helleren Pixel, Kanal für Kanal.
`color-dodge`	Hellt die untere Ebene auf, um die obere Ebene zu reflektieren, und erzeugt leuchtende Glanzlichter.
`color-burn`	Dunkelt die untere Ebene ab, um die obere Ebene zu reflektieren, und verstärkt die Schatten.
`hard-light`	Wie `overlay`, aber mit vertauschten Rollen von oben und unten — eine starke Kontraststeigerung.
`soft-light`	Eine sanftere Version von `overlay`; erhält Mitteltöne und vermeidet harte Kanten.
`difference`	Subtrahiert die dunklere Farbe von der helleren pro Kanal. Identische Farben ergeben Schwarz.
`exclusion`	Ähnlich wie `difference`, aber mit niedrigerem Kontrast; Mitteltöne werden grau.
`hue`	Übernimmt den Farbton der oberen Ebene mit der Sättigung und Helligkeit der unteren Ebene.
`saturation`	Übernimmt die Sättigung der oberen Ebene mit dem Farbton und der Helligkeit der unteren Ebene.
`color`	Übernimmt Farbton und Sättigung der oberen Ebene mit der Helligkeit der unteren Ebene — die Standardmethode zum Einfärben eines Graustufenfotos.
`luminosity`	Das Gegenteil von `color`: übernimmt die Helligkeit der oberen Ebene mit Farbton und Sättigung der unteren Ebene.

Die Blend-Modus-Familien verstehen

Die 16 Modi lassen sich in vier Familien einteilen:

Verdunkelnde Modi (multiply, darken, color-burn) — das Ergebnis ist nie heller als eine der Quellen. Nützlich für Schlagschatten, die Vertiefung von Schatten und das Hinzufügen dunkler Farbtöne.

Aufhellende Modi (screen, lighten, color-dodge) — das Ergebnis ist nie dunkler als eine der Quellen. Nützlich für Leuchten, Lichtlecks und Aufhellungseffekte.

Kontrastmodi (overlay, hard-light, soft-light) — dunkle Bereiche werden abgedunkelt und helle Bereiche aufgehellt, was den Gesamtkontrast steigert. Soft-light ist der subtilste; hard-light ist der aggressivste.

Differenz-/Exklusionsmodi (difference, exclusion) — erzeugen invertierte oder psychedelische Ergebnisse. Werden hauptsächlich für kreative Effekte oder Animationen verwendet; weniger verbreitet in der UI-Gestaltung.

Komponentenmodi (hue, saturation, color, luminosity) — zerlegen eine Farbe in ihre HSL-Komponenten und tauschen einzelne Kanäle zwischen den Ebenen aus. Diese Modi sind die Arbeitspferde für die Farbanpassung von Fotos.

Beispiele

normal

Kein Mischen — das vordere Bild wird über das hintere Bild gezeichnet, ohne dass eine Interaktion zwischen ihnen stattfindet.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: normal;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Probier es selbst »

screen

Helle Bereiche bleiben hell; dunkle Bereiche im oberen Bild werden transparent und geben die darunterliegende Ebene frei. Geeignet für das Hinzufügen von Leuchten oder sanften Lichtlecks.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: screen;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Probier es selbst »

color-dodge

Hellt die untere Ebene auf, um die obere Ebene zu reflektieren. Erzeugt lebhafte, high-key-Ergebnisse. Nützlich für Neon- oder Flare-Effekte.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: color-dodge;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Probier es selbst »

multiply

Multipliziert die Farbkanalwerte und erzeugt stets ein Ergebnis, das dunkler als beide Quellen ist. Weiße Bereiche werden transparent; schwarze Bereiche bleiben schwarz. Die klassische Wahl zum Hinzufügen von Farbtönen oder Schatten zu einem Foto.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: multiply;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Probier es selbst »

overlay

Steigert den Kontrast, indem multiply dort angewendet wird, wo die untere Ebene dunkel ist, und screen, wo sie hell ist. Bewahrt den tonalen Charakter der unteren Ebene und lässt sie hervorstechen.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: overlay;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Probier es selbst »

darken

Vergleicht jeden Farbkanal und behält den dunkleren Wert. Die beiden Ebenen konkurrieren Pixel für Pixel, und die dunkelsten Teile jeder Ebene gewinnen immer.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: darken;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Probier es selbst »

saturation

Übernimmt die Sättigung der oberen Ebene und bewahrt dabei Farbton und Helligkeit der unteren Ebene. Nützlich, um Teile eines Fotos zu entsättigen oder neu zu sättigen, während die Farbpalette erhalten bleibt.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: saturation;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Probier es selbst »

Häufige Anwendungsfälle

Ein Foto mit einer Markenfarbe einfärben

Legen Sie eine einfarbige background-color über ein Foto und verwenden Sie multiply, um das Bild in Richtung dieses Farbtons zu verschieben. Dunkle Bereiche im Foto nehmen den Farbton am stärksten auf.

.hero {
  background-image: url(photo.jpg);
  background-color: #4f46e5; /* indigo brand color */
  background-blend-mode: multiply;
}

Einen Duoton-Effekt erzeugen

Legen Sie zwei Verlaufshintergründe über ein Graustufenbild — einen für Glanzlichter, einen für Schatten — und verwenden Sie screen und multiply:

.duotone {
  background-image:
    linear-gradient(#ff6b6b, #ff6b6b),  /* highlight color */
    linear-gradient(#4f46e5, #4f46e5),  /* shadow color */
    url(photo.jpg);
  background-blend-mode: screen, multiply, normal;
}

Das Graustufenfoto erhält sowohl eine warme Glanzlichtebene (screen) als auch eine kühle Schattenebene (multiply), was den klassischen Zweiton-Look erzeugt, der in Hero-Bereichen beliebt ist.

Texturüberlagerung

Binden Sie eine Rausch- oder Papiertextur in eine einfarbige Hintergrundfarbe ein, ohne das Bild bearbeiten zu müssen:

.textured-card {
  background-image: url(noise.png);
  background-color: #f5f0eb;
  background-blend-mode: soft-light;
}

soft-light ist hier in der Regel die sanfteste Wahl — es fügt Textur hinzu, ohne die Grundfarbe auszuwaschen.

Interaktive Neufärbung beim Hover

Ändern Sie den Blend-Modus dynamisch, um einen reinen CSS-Hover-Effekt zu erzeugen:

.card {
  background-image: url(photo.jpg);
  background-color: #10b981;
  background-blend-mode: normal;
  transition: background-blend-mode 0s; /* instant switch */
}

.card:hover {
  background-blend-mode: multiply;
}

Hinweis: background-blend-mode ist nicht animierbar (keine Zwischenzustände), daher wechseln Übergänge abrupt statt zu interpolieren.

Wenn das Mischen des gesamten Elements erforderlich ist

background-blend-mode mischt Ebenen nur innerhalb des eigenen Hintergrunds des Elements. Wenn Sie ein Element mit dem dahinter liegenden Inhalt auf der Seite mischen müssen — zum Beispiel eine Milchglas-Überlagerung — verwenden Sie stattdessen mix-blend-mode.

Für Einzelbild-Anpassungen (Helligkeit, Kontrast, Graustufen), bei denen keine zweite Ebene benötigt wird, ist die Eigenschaft filter oft die einfachere Lösung, und opacity ist das richtige Werkzeug zum Ausblenden des gesamten Elements.

Browserunterstützung

background-blend-mode wird von allen modernen Browsern unterstützt (Chrome, Firefox, Edge, Safari und Opera). Internet Explorer hat es nie unterstützt. Geben Sie einen sinnvollen einfachen background-Fallback für ältere Umgebungen an — nicht gemischte Hintergründe rendern die Ebenen normal gestapelt ohne sichtbaren Fehler.

/* Fallback first, then enhanced */
.hero {
  background: url(photo.jpg) center / cover #4f46e5;
}

@supports (background-blend-mode: multiply) {
  .hero {
    background-blend-mode: multiply;
  }
}

Übungsaufgaben

Übung

Was bewirkt die CSS-Eigenschaft background-blend-mode?

Sie definiert den Mischmodus von Hintergrundbild und Hintergrundfarbe.Sie passt die Größe des Hintergrundbilds an.Sie steuert das Scrollen des Hintergrundbilds.Sie ermöglicht es mehreren Hintergrundbildern, sich ineinander zu mischen.Sie bestimmt die Position des Hintergrundbilds.