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

Initialer Wertnormal
Anwendbar aufAlle Elemente. In SVG wird er auf Containerelemente, Grafikelemente und Grafiken referenzierende Elemente angewandt.. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot 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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch