`<blend-mode>` CSS-Typ

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

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 mit einem Schlüsselwortwert aus der untenstehenden Liste definiert.

Werte

normal: Die endgültige Farbe ist die obere Farbe, unabhängig davon, welche Farbe die untere ist. Der Effekt ist wie bei zwei undurchsichtigen Papierstücken, die sich überlappen.
multiply: Die endgültige Farbe ergibt sich aus 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 bei zwei Bildern, die auf transparentem Film überlappen.
screen: Die endgültige Farbe ist das Ergebnis des Invertierens der Farben, deren Multiplikation und der Invertierung dieses Wertes. Eine schwarze Schicht führt zu keiner Änderung, und eine weiße Schicht führt zu einer weißen Endlage. Der Effekt ist wie zwei Bilder, die auf eine Leinwand projiziert werden.
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 Mischmodus entspricht hard-light, jedoch 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 ergibt sich aus 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 vollständig beleuchteten Farbe. Dieser Mischmodus ist screen ähnlich, jedoch muss der Vordergrund nur so hell sein wie das Inverse des Hintergrundes, um eine vollständig beleuchtete Farbe zu erzeugen.
color-burn: Die endgültige Farbe ergibt sich aus der Invertierung der unteren Farbe, der Division dieses Wertes 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 Mischmodus ist multiply ähnlich, jedoch muss der Vordergrund nur so dunkel sein wie das Inverse des Hintergrunds, um das Endbild schwarz zu machen.
hard-light: Die endgültige Farbe ergibt sich aus multiply, wenn die obere Farbe dunkler ist, oder screen, wenn die obere Farbe heller ist. Dieser Mischmodus entspricht overlay, jedoch mit vertauschten Schichten. Der Effekt ist ähnlich wie ein harsches Spotlight auf den Hintergrund.
soft-light: Die endgültige Farbe ist hard-light ähnlich, jedoch weicher. Dieser Mischmodus verhält sich ähnlich wie hard-light. Der Effekt ist ähnlich wie ein diffuses Spotlight auf den Hintergrund.
difference: Die endgültige Farbe ergibt sich aus 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 difference ähnlich, jedoch 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 sie die Sättigung und Helligkeit der unteren Farbe verwendet.
saturation: Die endgültige Farbe hat die Sättigung der oberen Farbe, während sie den Farbton und die Helligkeit der unteren Farbe verwendet. Ein reiner grauer Hintergrund, der keine Sättigung hat, wird keinen Effekt haben.
color: Die endgültige Farbe hat den Farbton und die Sättigung der oberen Farbe, während sie die Helligkeit der unteren Farbe verwendet. Der Effekt bewahrt Graustufen und kann verwendet werden, um den Vordergrund zu färben.
luminosity: Die endgültige Farbe hat die Helligkeit der oberen Farbe, während sie den Farbton und die Sättigung der unteren Farbe verwendet. Dieser Mischmodus entspricht color, jedoch mit vertauschten Schichten.

Beschreibung

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

Änderungen zwischen Mischmodi werden nicht interpoliert. Jede Änderung erfolgt sofort.

Formale Syntax

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

Beispiele

Beispiel mit "normal"

<div class="container"></div>

css

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

Setzen Sie andere Werte für background-blend-mode, Sie erhalten unterschiedliche Ergebnisse.

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

<div class="container"></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 mehrere div-Elemente, indem Sie eine Liste durchlaufen und für jedes einen anderen backgroundBlendMode-Wert setzen.

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

<div class="container"></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 class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></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 verschiedene mixBlendMode-Werte setzen.

Im folgenden Beispiel haben wir ein <div> mit zwei Hintergrundbildern darauf gesetzt — ein Firefox-Logo über einem linearen Verlauf. Darunter haben wir ein <select>-Menü bereitgestellt, das es Ihnen ermöglicht, den background-blend-mode, der auf das <div> angewendet wird, zu ändern, sodass Sie die verschiedenen Mischmodeffekte 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

Spezifikation
Compositing and Blending Module Level 2 # ltblendmodegt

Browser-Kompatibilität

Siehe auch

Das CSS Kompositing und 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:

Mischmodi auf Wikipedia
Mischmodi in Adobe Photoshop von Adobe

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

<blend-mode> CSS-Typ

HTML

CSS

JavaScript

Ergebnis

Help improve MDN

`<blend-mode>` CSS-Typ