CSS-Masking

Das CSS-Masking-Modul definiert Maskierung und das Abschneiden, zwei verschiedene grafische Operationen, die verwendet werden, um Teile von visuellen Elementen teilweise oder vollständig auszublenden.

Abschneiden beinhaltet das Definieren eines geschlossenen Vektorpfades, einer Form oder eines Polygons als Ausschnittspfad. Alles innerhalb der Region des Ausschnittspfades bleibt sichtbar, während alles außerhalb ausgeblendet oder "ausgeschnitten" wird. Die clip-path-Eigenschaft spezifiziert eine <basic-shape> oder referenziert ein SVG-<clipPath>-Element, das als Ausschnittspfad verwendet werden soll.

Die Masking-Eigenschaften von CSS werden verwendet, um ein Element oder dessen Rahmen zu maskieren. Ein grafisches Objekt wird dann auf den Hintergrund oder Rahmen gemalt, wobei Teile des Elements oder seines Rahmens je nach Opazität oder Leuchtdichte der Maske vollständig oder teilweise ausgeblendet werden.

Das Bild, das als Maske verwendet wird, 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.

Das Abschneiden und Maskieren in CSS verhält sich genauso wie bei SVG: Zuerst wird das Element ohne Filtereffekte, Maskierung, Abschneiden und Opazität gestaltet. Dann werden die Effekte in folgender Reihenfolge auf das Element angewendet: Filtereffekte, Abschneiden, Maskieren und Opazität.

Während Maskierung mehr Kontrolle und Optionen bietet, kann das Abschneiden besser performen, wenn nur eine einfache Form benötigt wird - sie sind einfacher zu interpolieren.