Übersicht

Die background-blend-mode Eigenschaft 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.

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
Mediennone
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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 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

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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 35 30.0 (30.0) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mrstork, Sebastianz, fscholz, kapep
Zuletzt aktualisiert von: mrstork,