CSS-Maskierung

Das CSS-Maskierungs-Modul definiert Maskierungs- und Zuschneideoperationen, zwei unterschiedliche grafische Verfahren, die verwendet werden, um Teile visueller Elemente teilweise oder vollständig zu verbergen.

Zuschneiden beinhaltet das Definieren eines geschlossenen Vektorpfads, einer Form oder eines Polygons als Zuschneidepfad. Alles innerhalb des Zuschneidepfadbereichs bleibt sichtbar, während alles außerhalb ausgeblendet oder „ausgeschnitten“ wird. Die clip-path-Eigenschaft spezifiziert eine <basic-shape> oder referenziert ein SVG-Element <clipPath>, das als Zuschneidepfad verwendet werden soll.

CSS Maskierungseigenschaften werden verwendet, um einem Element oder seinem Rand eine Maske zuzuweisen. Ein grafisches Objekt wird dann auf den Hintergrund oder den Rand gemalt, wodurch Teile des Elements oder seines Randes je nach Deckkraft oder Luminanz der Maske vollständig oder teilweise maskiert werden.

Das als Maske verwendete Bild wird durch die Eigenschaften mask-image oder mask-border-source spezifiziert. Die angegebene Maske kann ein <image>, ein <gradient> oder ein SVG-Element <mask> sein. Die Maske kann ähnlich wie Hintergrund- und Randbilder dimensioniert und positioniert werden.

Zuschneiden und Maskieren in CSS verhalten sich genauso wie in SVG: Zuerst wird das Element ohne Filtereffekte, Maskierung, Zuschneiden und Deckkraft gestylt. Dann werden alle Effekte in folgender Reihenfolge auf das Element angewendet: Filtereffekte, Zuschneiden, Maskieren und Deckkraft.

Während Maskierung mehr Kontrolle und Optionen bietet, kann Zuschneiden eine bessere Leistung erbringen, wenn nur eine einfache Form benötigt wird - sie sind einfacher zu interpolieren.