CSS-Maskierung

Das CSS-Maskierungsmodul definiert Maskierung und Clipping – zwei verschiedene grafische Operationen, die dazu verwendet werden, Teile von visuellen Elementen ganz oder teilweise zu verbergen.

Clipping beinhaltet die Definition eines geschlossenen Vektorpfads, einer Form oder eines Polygons als Clipping-Pfad. Alles innerhalb des Clipping-Pfads 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 Clipping-Pfad verwendet wird.

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

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

Das Verhalten von Clipping und Maskierung in CSS ist identisch wie in SVG: Zuerst wird das Element ohne Filtereffekte, Maskierung, Clipping und Deckkraft gestylt. Danach werden alle Effekte in folgender Reihenfolge auf das Element angewendet: Filtereffekte, Clipping, Maskierung und Deckkraft.

Während die Maskierung mehr Kontrolle und Optionen bietet, kann das Clipping leistungsfähiger sein, wenn nur eine Grundform benötigt wird – sie sind einfacher zu interpolieren.