CSS-Maskierung

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

Zuschnitt beinhaltet das Definieren eines geschlossenen Vektorpfades, einer Form oder eines Polygons als Zuschnittspfad. Alles innerhalb des Zuschnittspfadbereichs 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 Zuschnittspfad verwendet werden soll.

CSS-Maskierungseigenschaften werden verwendet, um einem Element oder dessen Rahmen eine Maske hinzuzufügen. Ein grafisches Objekt wird dann auf den Hintergrund oder Rahmen gemalt, wobei je nach Deckkraft oder Leuchtkraft der Maske Teile des Elements oder dessen Rahmen vollständig oder teilweise maskiert werden.

Das als Maske verwendete Bild wird durch die Eigenschaften mask-image oder mask-border-source angegeben. Die angegebene Maske kann ein <image>, ein <gradient>, oder ein SVG-<mask>-Element sein. Die Maske kann in ähnlicher Weise wie Hintergrund- und Rahmenbilder skaliert und positioniert werden.

Zuschnitt und Maskierung in CSS verhalten sich genauso wie bei SVG: Zuerst wird das Element ohne Filtereffekte, Maskierung, Zuschnitt und Deckkraft gestylt. Dann werden alle Effekte in der folgenden Reihenfolge auf das Element angewendet: Filtereffekte, Zuschnitt, Maskierung und Deckkraft.

Während Maskierung mehr Kontrolle und Optionen bietet, kann Zuschnitt besser funktionieren, wenn nur eine Grundform erforderlich ist — sie sind einfacher zu interpolieren.