background-blend-mode

Die CSS Eigenschaft background-blend-mode beschreibt, wie sich die Hintergrundbilder eines Elementes, sowie dessen Hintergrundfarbe, miteinander vemischen

Die Blending-Verfahren sollten in der selben Reihenfolge wie die Bilder der background-image Eigenschaft definiert werden. Wenn die Anzahl der Blending-Verfahren nicht mit der Anzahl der Hintergrundbilder übereinstimmt, werden sie wiederholt oder abgeschnitten, bis jedem Hintergrundbild ein Blending-Verfahren zugeordnet werden kann.

Syntax

/* Ein Wert */
background-blend-mode: normal;

/* Zwei Werte, einer pro Hintergrund */
background-blend-mode: darken, luminosity;

/* Globale Werte */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

Werte

<blend-mode> (en-US)
Ein <blend-mode> (en-US) welcher das Verfahren zur Vermischung von Hintergrundbildern und -farbe beschreibt. Es können mehrere Werte mit Kommas getrennt angegeben werden.

Formale Definition

Initialwertnormal
Anwendbar aufAlle Elemente. In SVG wird er auf Containerelemente, Grafikelemente und Grafiken referenzierende Elemente angewandt.. Auch anwendbar auf ::first-letter (en-US) und ::first-line (en-US).
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

<blend-mode> (en-US)#

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

Beispiele

Einfaches Beispiel

HTML

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

Probieren Sie verschiedene Mischmodi aus

Ergebnis

Spezifikationen

Spezifikation Status Kommentar
Compositing and Blending Level 1
Die Definition von 'background-blend-mode' in dieser Spezifikation.
Anwärter Empfehlung Ursprüngliche Definition

Browser Kompatibilität

BCD tables only load in the browser

Siehe auch