background-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.

Die CSS-Eigenschaft background-blend-mode legt fest, wie die Hintergrundbilder eines Elements miteinander und mit der Hintergrundfarbe des Elements gemischt werden sollen.

Probieren Sie es aus

Mischmodi sollten in derselben Reihenfolge definiert werden wie die Eigenschaft background-image. Wenn die Listenlängen der Mischmodi und Hintergrundbilder nicht gleich sind, wird sie wiederholt und/oder verkürzt, bis die Längen übereinstimmen.

Syntax

css

/* One value */
background-blend-mode: normal;

/* Two values, one per background */
background-blend-mode: darken, luminosity;

/* Global values */
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;

Werte

<blend-mode>: Der anzuwendende Mischmodus. Es können mehrere Werte, getrennt durch Kommata, angegeben werden.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	Alle Elemente. In SVG wird er auf Containerelemente, Grafikelemente und Grafiken referenzierende Elemente angewandt.. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

background-blend-mode = 
  <mix-blend-mode>#

Beispiele

Einfaches Beispiel

css

.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}

Verschiedene Mischmodi ausprobieren

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>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>

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

document.getElementById("select").onchange = (event) => {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));

Spezifikationen

Specification
Compositing and Blending Level 2 # background-blend-mode

Browser-Kompatibilität

BCD tables only load in the browser