W3docs
de
Anmelden

CSS mix-blend-mode Eigenschaft

Die CSS-Eigenschaft mix-blend-mode legt die Überblendung von Hintergrundbildern oder -farben fest. Werte und Beispiele im Überblick.

Die CSS-Eigenschaft mix-blend-mode steuert, wie der Inhalt eines Elements mit dem Inhalt dahinter vermischt wird — in der Regel mit der background-color, dem background-image des übergeordneten Elements oder einem anderen überlappenden Element. Anstatt dass eine Ebene die andere einfach überdeckt, kombiniert der Browser ihre Pixel mit einer mathematischen Formel (multiply, screen, difference usw.) — genauso wie Mischmodi in Photoshop funktionieren.

Diese Seite erklärt, was jeder Mischmodus bewirkt, wann der Stapelkontext eine Rolle spielt, und zeigt ausführbare Beispiele für die nützlichsten Werte.

Wie Überblendung funktioniert

Damit eine Überblendung sichtbar ist, müssen sich zwei Ebenen überlappen — zum Beispiel ein <img> auf einem farbigen <div>. Der Mischmodus vermischt dann die Pixel des Vordergrunds mit den Pixeln des Hintergrunds:

  • multiply verdunkelt — Weiß im Vordergrund verschwindet, dunkle Bereiche bleiben. Gut für Schatten und Färbung.
  • screen hellt auf — Schwarz verschwindet, helle Bereiche bleiben. Das Gegenteil von multiply.
  • overlay kombiniert beides: Es verdunkelt dunkle Bereiche und hellt helle Bereiche auf, was den Kontrast erhöht.
  • difference / exclusion subtrahieren Farben und erzeugen invertierte, kontrastreiche Effekte.
  • hue, saturation, color, luminosity mischen jeweils einen Kanal des Vordergrunds (Farbton, Sättigung usw.) mit dem Rest des Hintergrunds — nützlich zum Umfärben von Bildern.

Insgesamt gibt es 16 Mischmodi (aufgelistet in der Tabelle Werte unten).

Stapelkontext und Isolation

Das Setzen eines anderen Werts als normal erstellt einen neuen Stapelkontext für das Element. Das Element wird nur mit Inhalten innerhalb dieses Stapelkontexts gemischt — es wird nicht mit Inhalten außerhalb gemischt. Das verhindert, dass ein gemischtes Element auf die gesamte Seite ausstrahlt.

Aus diesem Grund kann jede Eigenschaft, die einen Stapelkontext erzeugt (wie opacity unter 1, transform oder position mit einem z-index), das Mischergebnis verändern. Um gezielt zu verhindern, dass ein Element mit dem dahinterliegenden Inhalt verschmilzt, kann einem Vorfahren die Eigenschaft isolation: isolate gegeben werden — dadurch wird ein neuer Stapelkontext erstellt, der die Überblendung einschränkt.

Tipp

Wenn Sie Hintergrundbilder eines Elements miteinander mischen möchten, können Sie die Eigenschaft background-blend-mode verwenden.

Anfangswertnormal
Gilt fürAlle Elemente.
VererbtNein.
AnimierbarNein.
VersionCSS1
DOM-Syntaxobject.style.mixBlendMode = "exclusion";

Syntax

Syntax der CSS-Eigenschaft mix-blend-mode

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;

Beispiel der mix-blend-mode-Eigenschaft:

Beispiel der CSS-Eigenschaft mix-blend-mode mit dem Wert multiply

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: multiply</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Probier es selbst »

Beispiel der mix-blend-mode-Eigenschaft mit dem Wert "screen":

Beispiel der CSS-Eigenschaft mix-blend-mode mit dem Wert screen

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: screen;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: screen</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Probier es selbst »

Beispiel der mix-blend-mode-Eigenschaft mit dem Wert "color-dodge":

Beispiel der CSS-Eigenschaft mix-blend-mode mit dem Wert color-dodge

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: color-dodge;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: color-dodge</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Probier es selbst »

Beispiel der mix-blend-mode-Eigenschaft mit dem Wert "hue":

Beispiel der CSS-Eigenschaft mix-blend-mode mit dem Wert hue

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: hue;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hue</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" />
    </div>
  </body>
</html>
Probier es selbst »

Beispiel der mix-blend-mode-Eigenschaft mit dem Wert "normal":

CSS-Eigenschaft mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 500px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: normal;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: normal</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>
Probier es selbst »

Beispiel der mix-blend-mode-Eigenschaft mit dem Wert "hard-light":

CSS-Eigenschaft mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: hard-light;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: hard-light</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>
Probier es selbst »

Beispiel der mix-blend-mode-Eigenschaft mit dem Wert "difference":

CSS-Eigenschaft mix-blend-mode

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: difference;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode property example</h2>
    <h3>Mix-blend-mode: difference</h3>
    <div class="example">
      <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="300" />
    </div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibung
normalKeine Überblendung — das Element wird normal auf dem Hintergrund gezeichnet. Dies ist der Standardwert.
multiplyMultipliziert die Farben; das Ergebnis ist immer dunkler. Weiß hat keinen Effekt, Schwarz bleibt Schwarz.
screenInvertiert, multipliziert und invertiert erneut; das Ergebnis ist immer heller. Das Gegenteil von multiply.
overlaymultiply auf dunklen Bereichen und screen auf hellen — erhöht den Kontrast.
darkenBehält für jeden Kanal die dunklere der beiden Farben.
lightenBehält für jeden Kanal die hellere der beiden Farben.
color-dodgeHellt den Hintergrund auf, um die Vordergrundfarbe widerzuspiegeln.
color-burnVerdunkelt den Hintergrund, um die Vordergrundfarbe widerzuspiegeln.
hard-lightWie overlay, aber mit vertauschten Ebenen — ein harter Scheinwerfereffekt.
soft-lightEine weichere Version von hard-light, wie ein diffuser Scheinwerfer.
differenceSubtrahiert die dunklere Farbe von der helleren; gleiche Farben ergeben Schwarz.
exclusionÄhnlich wie difference, aber mit geringerem Kontrast.
hueFarbton des Vordergrunds mit Sättigung und Helligkeit des Hintergrunds.
saturationSättigung des Vordergrunds mit Farbton und Helligkeit des Hintergrunds.
colorFarbton und Sättigung des Vordergrunds mit der Helligkeit des Hintergrunds — färbt um und erhält dabei Details.
luminosityHelligkeit des Vordergrunds mit Farbton und Sättigung des Hintergrunds.
initialSetzt die Eigenschaft auf ihren Standardwert (normal).
inheritErbt den Wert vom übergeordneten Element.

Verwandte Eigenschaften

  • background-blend-mode — mischt die eigenen Hintergrundebenen eines Elements (Bilder und Farbe) untereinander, anstatt mit dem dahinterliegenden Inhalt.
  • isolation — erstellt einen Stapelkontext, damit eine Überblendung eingeschränkt bleibt.
  • opacity und filter — weitere Möglichkeiten, die Komposition eines Elements zu verändern.

Übungen

Übung
Was passiert, wenn mix-blend-mode auf einen anderen Wert als 'normal' gesetzt wird?
Was passiert, wenn mix-blend-mode auf einen anderen Wert als 'normal' gesetzt wird?
Übung
Welcher Mischmodus erzeugt immer ein dunkleres Ergebnis, wobei Weiß im Vordergrund keinen Effekt hat?
Welcher Mischmodus erzeugt immer ein dunkleres Ergebnis, wobei Weiß im Vordergrund keinen Effekt hat?
Was this page helpful?