Maskenursprung - CSS-Tricks | CSS-Almanach 2025

Das mask-origingibt den Maskenpositionsbereich eines Maskenebenenbildes an. Mit anderen Worten, es definiert, wo der Ursprung des Maskenebenenbilds liegt, ob es sich um den Rand des Rahmens, des Auffüllens oder des Inhaltsfelds handelt.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

Gibt für Elemente, die als einzelnes Feld gerendert werden, mask-originden Maskenpositionierungsbereich an. Für Elemente, die als mehrere Felder gerendert werden (z. B. Inline-Felder in mehreren Zeilen, Felder auf mehreren Seiten), gibt die Eigenschaft an, mit welchen Feldern der box-decoration-breakMaskenpositionierungsbereich bestimmt wird.

Diese Eigenschaft funktioniert wie die background-originEigenschaft, außer dass sie einen anderen Anfangswert und drei zusätzliche Werte hat, die für SVG-Elemente gelten.

In der folgenden Demo können Sie den Ursprung des Maskenebenenbilds ändern. Darunter befindet sich dasselbe Bild, um den Effekt einer besseren Maskierung und Markierung der Rand- und Polsterbereiche zu zeigen:

Syntax

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Ursprünglicher Wert: border-box
Gilt für: Alle Elemente. In SVG gilt dies für Containerelemente mit Ausnahme des Elements, aller Grafikelemente und des Elements.
Geerbt: nein
Animationstyp: diskret

Werte

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Wertedefinitionen

content-box: Die Position ist relativ zum Inhaltsfeld. Der Ursprung von mask-imagebefindet sich in der oberen linken Ecke der Inhaltskante.
padding-box: Die Position ist relativ zur Polsterbox. Der Ursprung des Maskenbildes bei 0 0befindet sich in der oberen linken Ecke der Polsterkante, 100% 100%in der unteren rechten Ecke.
border-box: Der Standardwert, der die Position relativ zum Rahmenfeld festlegt.
margin-box: Die Position ist relativ zum Randfeld
fill-box: Die Position ist relativ zum Objektbegrenzungsrahmen
stroke-box: Die Position ist relativ zum Strichbegrenzungsrahmen
view-box: Verwendet das nächste SVG-Ansichtsfenster als Referenzfeld. Wenn viewBoxfür das Element zum Erstellen des SVG-Ansichtsfensters ein Attribut angegeben ist, wird das Referenzfeld am Ursprung des durch das viewBoxAttribut festgelegten Koordinatensystems positioniert und die Dimension des Referenzfelds auf die Werte widthund heightdes viewBoxAttributs festgelegt.
initial: Wendet die Standardeinstellung der Eigenschaft anborder-box
inherit: Übernimmt den mask-originWert des übergeordneten Elements .
unset: Entfernt den Strom mask-originaus dem Element.

Mehrere Werte verwenden

Diese Eigenschaft kann eine durch Kommas getrennte Liste von Werten für Maskenursprünge verwenden, wobei jeder Wert auf ein entsprechendes Maskenebenenbild angewendet wird, das in der mask-imageEigenschaft angegeben ist. Im folgenden Beispiel gibt der erste Wert den Ursprung des ersten Bildes an, der zweite Wert den Ursprung des zweiten Bildes usw.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

Anmerkungen

Für SVG - Elemente ohne zugehörige CSS - Layout - Box, die Werte content-box, padding-boxund border-boxberechnen zu fill-box.
Bei Elementen mit zugehörigen CSS - Layout - Box, der Werte fill-box, stroke-boxund view-boxRechen auf den initialWert mask-origin, der ist border-box.

Demo

Wenn das Maskenebenenbild wiederholt wird, wird die erste Instanz in der oberen linken Ecke des angegebenen Positionierungsbereichs positioniert und von dort aus entsprechend dem Wert der mask-repeatEigenschaft wiederholt .

Ändern Sie den Wert für mask-originin der folgenden Demo, um eine bessere Vorstellung davon zu erhalten, was gerade passiert: