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-Kontext erstellen muss.

Die Eigenschaften in diesem CSS-Modul können verwendet werden, um den Blending-Modus zu definieren, der gegebenenfalls verwendet werden sollte, um die Hintergrundbilder und -farben eines Elements in ein einziges Hintergrundbild zu überführen. Dieses Modul bietet 16 Blending-Modi. Sie können auch definieren, wie die Ränder, 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 Rand, zwei gestreifte Hintergrundbilder und einen einfarbigen Hintergrund. Der gemeinsame Hintergrund für alle Boxen enthält ein Kreismuster. Die drei Boxen in der zweiten Reihe sind so eingestellt, dass sie mit dem Hintergrund des Containers vermischt werden.

Beachten Sie, wie sich der Hintergrund, der Rand und der Inhalt als Ergebnis der Vermischung auswirken. Klicken Sie auf „Play“ im obigen Beispiel, um den Code für die Animation im MDN Playground zu sehen oder zu bearbeiten.

Referenz

Eigenschaften

Verwandte Konzepte

Spezifikationen

Specification
Compositing and Blending Level 2
Compositing and Blending Level 1

Siehe auch