CSS-Masking

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

Beschneidung beinhaltet das Definieren eines geschlossenen Vektorpfads, einer Form oder eines Polygons als Beschnittpfad. Alles innerhalb des Bereichs des Beschnittpfads bleibt sichtbar, während alles außerhalb verborgen oder "ausgeblendet" wird. Die clip-path-Eigenschaft spezifiziert eine <basic-shape> oder referenziert ein SVG-<clipPath>-Element, das als Beschnittpfad verwendet werden soll.

CSS-Maskierungs-Eigenschaften werden verwendet, um eine Maske auf ein Element oder dessen Rand anzuwenden. Ein grafisches Objekt wird dann vollständig oder teilweise auf den Hintergrund oder Rand gemalt, wodurch Teile des Elements oder seine Ränder je nach Deckkraft oder Luminanz der Maske ausgeblendet werden.

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

Beschneidung und Maskierung in CSS verhalten sich genauso wie bei SVG: Zuerst wird das Element ohne Filtereffekte, Maskierung, Beschneidung und Deckkraft gestylt. Dann werden dem Element die Effekte in folgender Reihenfolge angewendet: Filtereffekte, Beschneidung, Maskierung und Deckkraft.

Während die Maskierung mehr Kontrolle und Optionen bietet, kann die Beschneidung bessere Leistung bieten, wenn nur eine einfache Form benötigt wird — sie sind einfacher zu interpolieren.