Hintergrund-Mischmodus - CSS-Tricks

Die background-blend-modeEigenschaft definiert, wie ein Element background-imagemit dem background-colorfolgenden Element gemischt werden soll :

.container ( background-image: url('image.jpg.webp'); background-color: red; background-blend-mode: screen; )

Siehe den Pen-Hintergrund-Mischmodus von CSS-Tricks (@ css-Tricks) auf CodePen.

In der obigen Demo ist für die Standardeinstellung background-imagelinks kein Mischmodus festgelegt, sodass das Bild den Bildmodus überlappt background-color. Auf der rechten Seite hat der Mischmodus jedoch das background-imagemit dem Rot background-colordarunter geändert . Beachten Sie jedoch, dass die Textfarbe von dieser zusätzlichen Eigenschaft nicht beeinflusst wurde.

Werte

initial: Der Standardwert ohne Überblendung.
inherit: erbt den Mischmodus des übergeordneten Elements.
: Ein Wert, der das Hintergrundbild abhängig von seiner Hintergrundfarbe ändert.

Der Wert kann wie folgt eingestellt werden (in den Demos unten background-colorist rot):

`luminosity`: Die Leuchtkraft der oberen Farbe bleibt erhalten, während die Sättigung und der Farbton der Hintergrundfarbe verwendet werden.

Demo

Hier ist ein funktionierendes Beispiel dafür, wie diese Werte in Abhängigkeit von folgenden Faktoren interpretiert werden background-color:

Siehe den Stifthintergrund-Mischmodus von CSS-Tricks (@ css-Tricks) auf CodePen.

Verketten mehrerer Mischmodi

Jede Hintergrundebene kann nur einen einzigen Mischmodus haben. Wenn wir jedoch beispielsweise mehrere lineare Verläufe verwenden, kann jeder von ihnen einen eigenen Mischmodus haben, was für eine interessante Anzeige sorgt:

Sehen Sie sich die Stiftverläufe und den Hintergrundüberblendungsmodus von CSS-Tricks (@ css-Tricks) auf CodePen an.

Dies wird erreicht, indem diese Werte in der Reihenfolge der Hintergrundebene aufgelistet werden, die Sie ausführen möchten:

.container ( background: linear-gradient(purple 0%, red 90%), linear-gradient(to right, purple 0%, yellow 90%), url('image.jpg.webp') 30px, url('image.jpg.webp') 20px; background-blend-mode: screen, difference, lighten; )

Der erste lineare Gradient hat den screenMischmodus, gefolgt vom zweiten linearen Gradienten differenceund dem ersten Hintergrundbild, das darauf lightenangewendet wurde.