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
/* 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 Wert | 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
.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