CSS-Masking

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

Clipping beinhaltet das Definieren eines geschlossenen Vektorpfads, einer Form oder eines Polygons als Clipping-Pfad. Alles innerhalb des Clipping-Pfads bleibt sichtbar, während alles außerhalb ausgeblendet oder "ausgeschnitten" wird. Die clip-path-Eigenschaft gibt eine <basic-shape> an oder verweist auf ein SVG-Element <clipPath>, das als Clipping-Pfad verwendet werden soll.

Die Maskierung-Eigenschaften von CSS werden verwendet, um einem Element oder seinem Rand eine Maske hinzuzufügen. Ein grafisches Objekt wird dann auf den Hintergrund oder Rand gemalt und verdeckt vollständig oder teilweise Teile des Elements oder seines Randes, abhängig von der Opazität oder Leuchtkraft der Maske.

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 skaliert und positioniert werden.

Das Clipping und die Maskierung in CSS verhalten sich genauso wie bei SVG: Zunächst wird das Element ohne Filtereffekte, Maskierung, Clipping und Opazität gestylt. Dann werden alle Effekte in der folgenden Reihenfolge auf das Element angewendet: Filtereffekte, Clipping, Maskierung und Opazität.

Während die Maskierung mehr Kontrolle und Optionen bietet, kann das Clipping eine bessere Leistung bieten, wenn nur eine einfache Form erforderlich ist — sie sind leichter zu interpolieren.