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
<blend-mode>
Datentypbackdrop-filter
CSS-Eigenschaftfilter
CSS-Eigenschaftmask-composite
CSS-Eigenschaftbackground-color
CSS-Eigenschaftbackground-image
CSS-Eigenschaft- Stacking-Kontext Glossarbegriff
<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 es, Filtereffekte wie Unschärfe und Farbintensitätsänderung auf Bilder, Hintergründe und Ränder anzuwenden.
- Compositing und Blending in CSS (2015)
- Bilder in CSS bearbeiten: Blend-Modi (2022)
- web.dev: Blend-Modi (2021)