<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 ⁨Januar 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 aus der untenstehenden Liste gewählten Schlüsselwortwert definiert.

Werte

normal: Die endgültige Farbe ist die obere Farbe, unabhängig von der unteren Farbe. Der Effekt ähnelt zwei undurchsichtigen Papierstücken, die sich überlappen.
multiply: Die endgültige Farbe ist das Ergebnis der Multiplikation der oberen und unteren Farben. Eine schwarze Schicht führt zu einer schwarzen Endschicht, und eine weiße Schicht führt zu keiner Veränderung. Der Effekt ähnelt zwei Bildern, die auf transparentem Film überlappen.
screen: Die endgültige Farbe ist das Ergebnis der Invertierung der Farben, ihrer Multiplikation und der erneuten Invertierung des Wertes. Eine schwarze Schicht führt zu keiner Veränderung, und eine weiße Schicht führt zu einer weißen Endschicht. Der Effekt ähnelt zwei Bildern, die auf eine Projektionsfläche projiziert werden.
overlay: Die endgültige Farbe ist das Resultat von multiply, wenn die untere Farbe dunkler ist, oder screen, wenn die untere Farbe heller ist. Dieser Mischmodus entspricht hard-light, aber mit vertauschten Schichten.
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 Veränderung. Ein Vordergrund mit der inversen Farbe des Hintergrunds führt zu einer vollständig beleuchteten Farbe. Dieser Mischmodus ähnelt screen, aber der Vordergrund muss nur so hell wie das Inverse des Hintergrunds sein, um eine vollständig beleuchtete Farbe zu erzeugen.
color-burn: Die endgültige Farbe ist das Ergebnis der Invertierung der unteren Farbe, der Division des Wertes durch die obere Farbe und der erneuten Invertierung dieses Wertes. Ein weißer Vordergrund führt zu keiner Veränderung. Ein Vordergrund mit der inversen Farbe des Hintergrunds führt zu einem schwarzen Endbild. Dieser Mischmodus ähnelt multiply, 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 Mischmodus entspricht overlay, aber mit vertauschten Schichten. Der Effekt ähnelt dem Bestrahlen des Hintergrunds mit einem harten Scheinwerfer.
soft-light: Die endgültige Farbe ist ähnlich wie bei hard-light, aber weicher. Dieser Mischmodus verhält sich ähnlich wie hard-light. Der Effekt ähnelt dem Bestrahlen des Hintergrunds mit einem diffusen Scheinwerfer.
difference: Die endgültige Farbe ist das Ergebnis der Subtraktion der dunkleren Farbe von der helleren Farbe. Eine schwarze Schicht hat keinen Effekt, während eine weiße Schicht die Farbe der anderen Schicht invertiert.
exclusion: Die endgültige Farbe ist ähnlich wie difference, aber mit weniger Kontrast. Wie bei difference hat eine schwarze Schicht keinen Effekt, während eine weiße Schicht die Farbe der anderen Schicht invertiert.
hue: Die endgültige Farbe hat den Farbton der oberen Farbe, während die Sättigung und Helligkeit der unteren Farbe genutzt werden.
saturation: Die endgültige Farbe hat die Sättigung der oberen Farbe, während der Farbton und die Helligkeit der unteren Farbe genutzt werden. Ein rein grauer Hintergrund, der keine Sättigung hat, hat keinen Effekt.
color: Die endgültige Farbe hat den Farbton und die Sättigung der oberen Farbe, während die Helligkeit der unteren Farbe genutzt wird. Der Effekt bewahrt Graustufen und kann verwendet werden, um den Vordergrund einzufärben.
luminosity: Die endgültige Farbe hat die Helligkeit der oberen Farbe, während der Farbton und die Sättigung der unteren Farbe genutzt werden. Dieser Mischmodus entspricht color, aber mit vertauschten Schichten.

Für jedes Pixel unter den Schichten, auf die er angewendet wird, nimmt ein Mischmodus die Farben des Vordergrunds und des Hintergrunds, führt eine Berechnung an ihnen durch und gibt einen neuen Farbwert zurück.

Änderungen zwischen Mischmodi 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 Mischmodi

Im folgenden Beispiel haben wir ein <div> mit zwei darauf gesetzten Hintergrundbildern – einem Firefox-Logo über einem linearen Farbverlauf. Darunter haben wir ein <select>-Menü bereitgestellt, das es Ihnen ermöglicht, den background-blend-mode, der auf das <div> angewendet wird, zu ändern, um die verschiedenen Effekte der Mischmodi zu vergleichen.

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

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 Mischmodi auf anderen Websites:

Blend modes auf Wikipedia
Blending modes in Adobe Photoshop von Adobe

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden