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 festzulegen, der gegebenenfalls verwendet werden soll, um die Hintergrundbilder und -farben eines Elements zu einem einzigen Hintergrundbild zu vermischen. Dieses Modul bietet 16 Blending-Modi. Sie können auch festlegen, 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 Muster aus Kreisen. Die drei Boxen in der zweiten Reihe sind so eingestellt, dass sie mit dem Hintergrund des Containers vermischt werden.
Beachten Sie, wie der Hintergrund, der Rand und der Inhalt durch das Blending beeinflusst werden. Um den Code für dieses Beispiel zu sehen, sehen Sie den Quellcode auf GitHub an.
Referenz
Eigenschaften
Verwandte Konzepte
<blend-mode>Datentypbackdrop-filterCSS-EigenschaftfilterCSS-Eigenschaftmask-compositeCSS-Eigenschaftbackground-colorCSS-Eigenschaftbackground-imageCSS-Eigenschaft- stacking context Glossarbegriff
<feBlend>SVG-Filterprimitive<feComposite>SVG-Filterprimitive
Spezifikationen
| Specification |
|---|
| Compositing and Blending Level 2 |
| Compositing and Blending Level 1 |
Siehe auch
- Eigenschaften im CSS Filter Effects-Modul ermöglichen das Anwenden von Filtereffekten, wie z. B. das Verwischen und Ändern der Farbintensität, auf Bilder, Hintergründe und Ränder.
- Compositing And Blending In CSS (2015)
- Editing Images in CSS: Blend Modes (2022)
- web.dev: blend modes (2021)