CSS-Maskierung

Das CSS-Maskierungsmodul definiert Maskierung und Clipping, zwei verschiedene grafische Operationen, die verwendet werden, um Teile von visuellen Elementen teilweise oder vollständig zu verbergen.

Clipping beinhaltet das Definieren eines geschlossenen Vektorpfads, einer Form oder eines Polygons als Clipping-Pfad. Alles innerhalb des Clipping-Pfad-Bereichs bleibt sichtbar, während alles außerhalb verborgen wird oder "ausgeschnitten" ist. Die clip-path-Eigenschaft gibt eine <basic-shape> an oder verweist auf ein SVG-<clipPath>-Element, das als Clipping-Pfad verwendet werden soll.

CSS-Maskierungseigenschaften werden verwendet, um eine Maske auf ein Element oder dessen Rand anzuwenden. Ein grafisches Objekt wird dann auf den Hintergrund oder Rand gezeichnet und maskiert je nach Opazität oder Leuchtkraft der Maske Teile des Elements oder seines Randes vollständig oder teilweise.

Das Bild, das als Maske verwendet wird, wird durch die mask-image- oder mask-border-source-Eigenschaften angegeben. Die angegebene Maske kann ein <image>, ein <gradient> oder ein SVG-<mask>-Element sein. Die Maske kann ähnlich wie Hintergrund- und Randelemente skaliert und positioniert werden.

Clipping und Maskierung in CSS verhalten sich genauso wie bei SVG: Zuerst wird das Element ohne Filtereffekte, Maskierung, Clipping und Opazität gestylt. Dann werden die Effekte in folgender Reihenfolge auf das Element angewendet: Filtereffekte, Clipping, Maskierung und Opazität.

Während Maskierung mehr Kontrolle und Optionen bietet, kann Clipping besser funktionieren, wenn nur eine einfache Form benötigt wird — sie sind einfacher zu interpolieren.