<blend-mode>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Der <blend-mode> CSS Datentyp beschreibt, wie Farben erscheinen sollen, wenn Elemente sich überlappen. Er wird in den Eigenschaften background-blend-mode und mix-blend-mode verwendet.

Syntax

Der <blend-mode> Datentyp wird durch einen Schlüsselwortwert definiert, der aus der untenstehenden Liste ausgewählt wird.

Werte

normal: Die endgültige Farbe ist die obere Farbe, unabhängig davon, was die untere Farbe ist. Der Effekt ist wie bei zwei undurchsichtigen Papierstücken, die sich überlappen.
multiply: Die endgültige Farbe ist das Ergebnis der Multiplikation der oberen und unteren Farben. Eine schwarze Ebene führt zu einer schwarzen Endschicht, und eine weiße Ebene führt zu keiner Änderung. Der Effekt ist wie bei zwei auf transparentem Film gedruckten Bildern, die sich überlappen.
screen: Die endgültige Farbe ist das Ergebnis der Invertierung der Farben, ihrer Multiplikation und der Invertierung dieses Wertes. Eine schwarze Ebene führt zu keiner Änderung, und eine weiße Ebene führt zu einer weißen Endschicht. Der Effekt ist wie bei zwei auf eine Projektionsleinwand projizierten Bildern.
overlay: Die endgültige Farbe ist das Ergebnis von multiply, wenn die untere Farbe dunkler ist, oder screen, wenn die untere Farbe heller ist. Dieser Blendmodus entspricht hard-light, aber mit vertauschten Ebenen.
darken: Die endgültige Farbe setzt sich aus den dunkelsten Werten jedes Farbkanals zusammen.
lighten: Die endgültige Farbe setzt sich aus den hellsten Werten jedes Farbkanals zusammen.
color-dodge: Die endgültige Farbe ist das Ergebnis der Division der unteren Farbe durch das Inverse der oberen Farbe. Ein schwarzer Vordergrund führt zu keiner Änderung. Ein Vordergrund mit der inversen Farbe des Hintergrunds führt zu einer voll beleuchteten Farbe. Dieser Blendmodus ist screen ähnlich, aber der Vordergrund muss nur so hell wie das Inverse des Hintergrunds sein, um eine voll beleuchtete Farbe zu erzeugen.
color-burn: Die endgültige Farbe ist das Ergebnis der Invertierung der unteren Farbe, deren Division durch die obere Farbe und der Invertierung dieses Wertes. Ein weißer Vordergrund führt zu keiner Änderung. Ein Vordergrund mit der inversen Farbe des Hintergrunds führt zu einem schwarzen Endbild. Dieser Blendmodus ist multiply ähnlich, aber der Vordergrund muss nur so dunkel wie das Inverse des Hintergrunds sein, um das Endbild schwarz zu machen.
hard-light: Die endgültige Farbe ist das Ergebnis von multiply, wenn die obere Farbe dunkler ist, oder screen, wenn die obere Farbe heller ist. Dieser Blendmodus entspricht overlay, aber mit vertauschten Ebenen. Der Effekt ist ähnlich, als würde ein starker Scheinwerfer auf den Hintergrund gerichtet.
soft-light: Die endgültige Farbe ist ähnlich hard-light, aber weicher. Dieser Blendmodus verhält sich ähnlich wie hard-light. Der Effekt ist ähnlich, als würde ein diffundierter Scheinwerfer auf den Hintergrund gerichtet.
difference: Die endgültige Farbe ist das Ergebnis des Abziehens der dunkleren der beiden Farben von der helleren. Eine schwarze Ebene hat keinen Effekt, während eine weiße Ebene die Farbe der anderen Ebene invertiert.
exclusion: Die endgültige Farbe ist ähnlich difference, aber mit weniger Kontrast. Wie bei difference hat eine schwarze Ebene keinen Effekt, während eine weiße Ebene die andere Ebene invertiert.
hue: Die endgültige Farbe hat den Farbton der oberen Farbe, während die Sättigung und Helligkeit der unteren Farbe verwendet werden.
saturation: Die endgültige Farbe hat die Sättigung der oberen Farbe, während der Farbton und die Helligkeit der unteren Farbe verwendet werden. Ein rein grauer Hintergrund, der keine Sättigung hat, wird keine Auswirkung haben.
color: Die endgültige Farbe hat den Farbton und die Sättigung der oberen Farbe, während die Helligkeit der unteren Farbe verwendet wird. Der Effekt bewahrt die Graustufen und kann verwendet werden, um den Vordergrund zu kolorieren.
luminosity: Die endgültige Farbe hat die Helligkeit der oberen Farbe, während der Farbton und die Sättigung der unteren Farbe verwendet werden. Dieser Blendmodus entspricht color, aber mit vertauschten Ebenen.

Für jedes Pixel zwischen den Ebenen, auf die es angewendet wird, nimmt ein Blendmodus die Farben des Vorder- und Hintergrunds, führt eine Berechnung an ihnen durch und gibt einen neuen Farbwert zurück.

Änderungen zwischen den Blendmodi werden nicht interpoliert. Jede Änderung erfolgt sofort.

Formale Syntax

<blend-mode> = 
  normal       |
  multiply     |
  screen       |
  overlay      |
  darken       |
  lighten      |
  color-dodge  |
  color-burn   |
  hard-light   |
  soft-light   |
  difference   |
  exclusion    |
  hue          |
  saturation   |
  color        |
  luminosity

Beispiele

Beispiel mit "normal"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}

Beispiel mit "multiply"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: multiply;
}

Beispiel mit "screen"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}

Beispiel mit "overlay"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: overlay;
}

Beispiel mit "darken"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: darken;
}

Beispiel mit "lighten"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: lighten;
}

Beispiel mit "color-dodge"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-dodge;
}

Beispiel mit "color-burn"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-burn;
}

Beispiel mit "hard-light"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hard-light;
}

Beispiel mit "soft-light"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: soft-light;
}

Beispiel mit "difference"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: difference;
}

Beispiel mit "exclusion"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: exclusion;
}

Beispiel mit "hue"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hue;
}

Beispiel mit "saturation"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: saturation;
}

Beispiel mit "color"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color;
}

Beispiel mit "luminosity"

<div id="div"></div>

css

#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: luminosity;
}

Vergleich der Blendmodi

Im folgenden Beispiel haben wir ein <div> mit zwei darauf gesetzten Hintergrundbildern — einem Firefox-Logo über einem linearen Gradienten. Darunter befindet sich ein <select>-Menü, das es Ihnen ermöglicht, den background-blend-mode des <div> zu ändern, sodass Sie die verschiedenen Blendmoduseffekte vergleichen können.

HTML

html

<div></div>
<p>Choose a blend-mode:</p>
<select>
  <option selected>normal</option>
  <option>multiply</option>
  <option>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>

CSS

css

div {
  width: 300px;
  height: 300px;
  background:
    url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png)
      no-repeat center,
    linear-gradient(to bottom, blue, orange);
}

JavaScript

const selectElem = document.querySelector("select");
const divElem = document.querySelector("div");

selectElem.addEventListener("change", () => {
  divElem.style.backgroundBlendMode = selectElem.value;
});

Ergebnis

Spezifikationen

Specification
Compositing and Blending Level 2 # ltblendmodegt

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Das CSS compositing and blending Modul, das die <blend-mode> Werte definiert.
Eigenschaften, die diesen Datentyp verwenden: background-blend-mode, mix-blend-mode

Beschreibung zu verschiedenen Blendmodi auf anderen Websites:

Blend modes auf Wikipedia
Blending modes in Adobe Photoshop von Adobe