CSS-Maskierung

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

Abschneiden beinhaltet die Definition eines geschlossenen Vektorwegs, einer Form oder eines Polygons als Abschneidepfad. Alles innerhalb des Abschneidepfadbereichs bleibt sichtbar, während alles außerhalb verborgen oder "ausgeschnitten" wird. Die Eigenschaft clip-path spezifiziert eine <basic-shape> oder verweist auf ein SVG-Element <clipPath>, das als Abschneidepfad verwendet werden soll.

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

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

Abschneiden und Maskierung in CSS verhalten sich ebenso wie bei SVG: Zuerst wird das Element ohne Filtereffekte, Maskierung, Abschneiden und Deckkraft gestylt. Dann werden alle Effekte in der folgenden Reihenfolge auf das Element angewendet: Filtereffekte, Abschneiden, Maskierung und Deckkraft.

Während die Maskierung mehr Kontrolle und Optionen bietet, kann das Abschneiden besser abschneiden, wenn nur eine einfache Form erforderlich ist — sie sind einfacher zu interpolieren.