CSS-Maskierung

Das CSS-Masking-Modul definiert Maskierung und Zuschnitt, zwei verschiedene grafische Operationen, die dazu verwendet werden, Teile von visuellen Elementen teilweise oder vollständig zu verbergen.

Zuschnitt beinhaltet das Definieren eines geschlossenen Vektorpfads, einer Form oder eines Polygons als Zuschnittspfad. Alles innerhalb des Zuschnittspfadbereichs bleibt sichtbar, während alles außerhalb verborgen oder "ausgeschnitten" wird. Die clip-path-Eigenschaft spezifiziert eine <basic-shape> oder verweist auf ein SVG-<clipPath>-Element, das als Zuschnittspfad verwendet wird.

CSS-Maskierungseigenschaften werden verwendet, um einem Element oder seinem Rahmen eine Maske anzuwenden. Ein grafisches Objekt wird dann auf den Hintergrund oder Rahmen gemalt und maskiert je nach Deckkraft oder Luminanz der Maske entweder vollständig oder teilweise Teile des Elements oder seines Rahmens.

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 ähnlich wie Hintergrund- und Rahmenbilder skaliert und positioniert werden.

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

Obwohl Maskierung mehr Kontrolle und Optionen bietet, kann Zuschnitt bei der Verwendung einer einfachen Form leistungsstärker sein, da sie einfacher zu interpolieren sind.