<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 überlagern. Er wird in den Eigenschaftenbackground-blend-mode undmix-blend-mode verwendet.

Syntax

Der<blend-mode> Datentyp wird mittels eines Schlüsselwortwerts definiert, der aus der untenstehenden Liste ausgewählt wird.

Werte

normal: Die endgültige Farbe ist die obere Farbe, unabhängig von der unteren Farbe.Der Effekt ist wie zwei undurchsichtige Papierstücke, 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 Änderung.Der Effekt ist wie zwei Bilder, die auf transparenter Folie gedruckt und überlagert werden.
screen: Die endgültige Farbe ist das Ergebnis der Invertierung der Farben, deren Multiplikation und erneute Invertierung.Eine schwarze Schicht führt zu keiner Änderung, und eine weiße Schicht führt zu einer weißen Endschicht.Der Effekt ist wie zwei Bilder, die auf eine Projektionsleinwand scheinen.
overlay: Die endgültige Farbe ist das Ergebnis vonmultiply, wenn die untere Farbe dunkler ist, oderscreen, wenn die untere Farbe heller ist.Dieser Mischmodus entsprichthard-light, jedoch mit vertauschten Schichten.
darken: Die endgültige Farbe besteht aus den dunkelsten Werten jedes Farbkanals.
lighten: Die endgültige Farbe besteht aus den hellsten Werten jedes Farbkanals.
color-dodge: Die endgültige Farbe ist das Ergebnis der Division der unteren Farbe durch die 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 Mischmodus ähneltscreen, aber der Vordergrund muss nur so hell wie die 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, der Division des Werts durch die obere Farbe und der erneuten Invertierung.Ein weißer Vordergrund führt zu keiner Änderung. Ein Vordergrund mit der inversen Farbe des Hintergrunds führt zu einem schwarzen Endbild.Dieser Mischmodus ähneltmultiply, aber der Vordergrund muss nur so dunkel wie die Inverse des Hintergrunds sein, um das Endbild schwarz zu machen.
hard-light: Die endgültige Farbe ist das Ergebnis vonmultiply, wenn die obere Farbe dunkler ist, oderscreen, wenn die obere Farbe heller ist.Dieser Mischmodus entsprichtoverlay, jedoch mit vertauschten Schichten.Der Effekt ähnelt dem einerharten Scheinwerferbeleuchtung auf den Hintergrund.
soft-light: Die endgültige Farbe ist ähnlich wiehard-light, aber weicher.Dieser Mischmodus verhält sich ähnlich wiehard-light.Der Effekt ähnelt dem einesweichen Scheinwerferlichts auf den Hintergrund.
difference: Die endgültige Farbe ist das Ergebnis der Subtraktion der dunkleren der beiden Farben von der helleren.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 wiedifference, jedoch mit weniger Kontrast.Wie beidifference hat eine schwarze Schicht keinen Effekt, während eine weiße Schicht die Farbe der anderen Schicht invertiert.
hue: Die endgültige Farbe hat denFarbton der oberen Farbe, während sie dieSättigung undHelligkeit der unteren Farbe verwendet.
saturation: Die endgültige Farbe hat dieSättigung der oberen Farbe, während sie denFarbton undHelligkeit der unteren Farbe verwendet.Ein reiner grauer Hintergrund, ohne Sättigung, hat keinen Effekt.
color: Die endgültige Farbe hat denFarbton und dieSättigung der oberen Farbe, während sie dieHelligkeit der unteren Farbe verwendet.Der Effekt bewahrt Graustufen und kann verwendet werden, um den Vordergrund einzufärben.
luminosity: Die endgültige Farbe hat dieHelligkeit der oberen Farbe, während sie denFarbton und dieSättigung der unteren Farbe verwendet.Dieser Mischmodus entsprichtcolor, jedoch mit vertauschten Schichten.

Beschreibung

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

Änderungen zwischen Mischmodi werden nicht interpoliert. Jegliche Ä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></div>

css

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

Setzen Sie andere Werte fürbackground-blend-mode, und Sie erhalten unterschiedliche Ergebnisse.

Vergleich zwischen verschiedenen Werten mit`background-blend-mode`

<div></div>

css

.container {  width: 720px;  height: 760px;  display: grid;  grid: auto-flow 190px / repeat(4, 180px);  border-top: 1px solid #d8d8d8;  border-left: 1px solid #d8d8d8;}.container > div {  border-right: 1px solid #d8d8d8;  border-bottom: 1px solid #d8d8d8;}.container div div {  margin-left: 15px;  width: 150px;  height: 150px;  background: url("br.png"), url("tr.png");}.container div p {  line-height: 30px;  margin: 0;  color: #a33333;  text-align: center;}

const list = [  "normal",  "multiply",  "screen",  "overlay",  "darken",  "lighten",  "color-dodge",  "color-burn",  "hard-light",  "soft-light",  "difference",  "exclusion",  "hue",  "saturation",  "color",  "luminosity",];const containerElem = document.querySelector(".container");list.forEach((item) => {  const innerElem = document.createElement("div");  innerElem.style.backgroundBlendMode = item;  const textElem = document.createElement("p");  textElem.innerText = item;  const outerElem = document.createElement("div");  outerElem.appendChild(textElem);  outerElem.appendChild(innerElem);  containerElem.appendChild(outerElem);});

Erstellen Sie mehrerediv-Elemente, indem Sie eine Liste durchlaufen und setzen Sie für jedes einen anderenbackgroundBlendMode-Wert.

Vergleich zwischen verschiedenen Werten mit`mix-blend-mode`

<div></div>

.container {  width: 640px;  height: 800px;  display: grid;  grid: auto-flow 160px / repeat(4, 160px);  border-top: 1px solid #d8d8d8;  border-left: 1px solid #d8d8d8;}.container > div {  border-right: 1px solid #d8d8d8;  border-bottom: 1px solid #d8d8d8;}.container > div > div {  position: relative;  margin-left: 20px;  width: 120px;  height: 120px;}.container div p {  margin: 0;  line-height: 30px;  color: #a33333;  text-align: center;}.circle {  width: 80px;  height: 80px;  border-radius: 50%;  mix-blend-mode: screen;  position: absolute;}.circle-1 {  background: red;}.circle-2 {  background: lightgreen;  left: 40px;}.circle-3 {  background: blue;  left: 20px;  top: 40px;}.isolate {  isolation: isolate; /* Without isolation, the background color will be taken into account */  position: relative;}

const list = [  "normal",  "multiply",  "screen",  "overlay",  "darken",  "lighten",  "color-dodge",  "color-burn",  "hard-light",  "soft-light",  "difference",  "exclusion",  "hue",  "saturation",  "color",  "luminosity",  "plus-darker",  "plus-lighter",];const containerElem = document.querySelector(".container");list.forEach((item) => {  const innerElem = document.createElement("div");  innerElem.innerHTML = `    <div></div>    <div></div>    <div></div>  `;  innerElem.querySelectorAll(".circle").forEach((circle) => {    circle.style.mixBlendMode = item;  });  const textElem = document.createElement("p");  textElem.innerText = item;  const outerElem = document.createElement("div");  outerElem.appendChild(textElem);  outerElem.appendChild(innerElem);  containerElem.appendChild(outerElem);});

Im folgenden Beispiel erstellen wir mehrere<div>-Elemente, indem wir eine Liste durchlaufen und für jedes verschiedenemixBlendMode-Werte setzen.

Im folgenden Beispiel haben wir ein<div>, auf dem zwei Hintergrundbilder gesetzt sind — ein Firefox-Logo über einem linearen Verlauf. Darunter haben wir ein<select>-Menü bereitgestellt, das es Ihnen ermöglicht, denbackground-blend-mode auf das<div> anzuwenden, damit Sie die verschiedenen Mischmode-Effekte 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;});