CSS-Maskierung

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

Beim Zuschnitt wird ein geschlossener Vektorpfad, eine Form oder ein Polygon als Zuschnittspfad definiert. Alles innerhalb des Zuschnittspfad-Bereichs bleibt sichtbar, während alles außerhalb verborgen bzw. "ausgeschnitten" wird. Die Eigenschaft clip-path gibt eine <basic-shape> an oder verweist auf ein SVG-Element <clipPath>, das als Zuschnittspfad verwendet wird.

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

Das Bild, das als Maske verwendet wird, wird durch die Eigenschaften mask-image oder mask-border-source festgelegt. 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.

Der Zuschnitt und die Maskierung in CSS verhalten sich wie bei SVG: Zuerst wird das Element ohne Filtereffekte, Maskierung, Zuschnitt und Deckkraft gestaltet. Dann werden die Effekte in folgender Reihenfolge auf das Element angewendet: Filtereffekte, Zuschnitt, Maskierung und Deckkraft.

Während die Maskierung mehr Kontrolle und Optionen bietet, kann der Zuschnitt eine bessere Leistung erbringen, wenn nur eine einfache Form erforderlich ist - sie sind einfacher zu interpolieren.