background-blend-mode
Try it
Die CSS Eigenschaft background-blend-mode
beschreibt, wie sich die Hintergrundbilder eines Elementes, sowie dessen Hintergrundfarbe, miteinander vemischen
Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte https://github.com/mdn/interactive-examples und senden Sie uns eine Pull-Anfrage.
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
Initialwert | normal |
---|---|
Anwendbar auf | Alle 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). |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
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