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>
Ein <blend-mode> 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 und ::first-line.
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

<blend-mode>#

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