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
<blend-mode>
Datentypbackdrop-filter
CSS-Eigenschaftfilter
CSS-Eigenschaftmask-composite
CSS-Eigenschaftbackground-color
CSS-Eigenschaftbackground-image
CSS-Eigenschaft- Stacking Context Glossar-Eintrag
<feBlend>
SVG-Filterprimitive<feComposite>
SVG-Filterprimitive
Spezifikationen
Specification |
---|
Compositing and Blending Level 2 |
Compositing and Blending Level 1 |
Siehe auch
- Eigenschaften im CSS-Filtereffekte-Modul ermöglichen das Anwenden von Filtereffekten, wie das Weichzeichnen und Ändern der Farbintensität, auf Bilder, Hintergründe und Rahmen.
- Compositing And Blending In CSS (2015)
- Editing Images in CSS: Blend Modes (2022)
- web.dev: blend modes (2021)