CSS Compositing und Blending

Das CSS Compositing und Blending-Modul definiert, wie die Hintergrundebenen eines Elements miteinander vermischt werden können, wie ein Element mit seinem Container vermischt werden kann und ob das Element einen neuen Stacking Context erzeugen muss.

Die Eigenschaften in diesem CSS-Modul können genutzt werden, um den Mischmodus festzulegen, der – falls gewünscht – verwendet werden soll, um die Hintergrundbilder und -farben eines Elements zu einem einzigen Hintergrundbild zu kombinieren. Dieses Modul bietet 16 Mischmodi. Sie können auch definieren, wie die Rahmen, der Hintergrund und der Inhalt eines Elements, einschließlich Text, Emojis und Bilder, mit dem Hintergrund seines Containers vermischt werden sollen.

Compositing und Blending in Aktion

In diesem Beispiel hat jede Box einen Rahmen, zwei gestreifte Hintergrundbilder und einen einfarbigen Hintergrund. Der gemeinsame Hintergrund für alle Boxen enthält ein Kreis-Muster. Die drei Boxen in der zweiten Zeile sind so eingestellt, dass sie mit dem Hintergrund des Containers vermischt werden.

Beachten Sie, wie der Hintergrund, der Rahmen und der Inhalt durch das Mischen beeinflusst werden. Klicken Sie oben im Beispiel auf „Play“, um den Code für die Animation im MDN Playground anzusehen oder zu bearbeiten.

Referenz

Eigenschaften

Verwandte Konzepte

Spezifikationen

Specification
Compositing and Blending Level 2
Compositing and Blending Level 1

Siehe auch