Mask-origin | CSS-Tricks

CSS Almanac → Eigenschaften → M → mask-origin

Mojtaba Seyedi am 10. Mai 2021

Die mask-origin legt den Positionierungsbereich für die Maske eines Maskenbildes fest. Mit anderen Worten, sie definiert, wo der Ursprung des Maskenbildes liegt, sei es am Rand des Rahmens, des Innenabstands oder des Inhaltsbereichs.

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

Bei Elementen, die als einzelne Box gerendert werden, gibt mask-origin den Maskenpositionierungsbereich an. Bei Elementen, die als mehrere Boxen gerendert werden (z. B. Inline-Boxen auf mehreren Zeilen, Boxen auf mehreren Seiten), gibt die Eigenschaft an, auf welche Boxen box-decoration-break angewendet wird, um den Maskenpositionierungsbereich zu bestimmen.

Diese Eigenschaft funktioniert wie die background-origin-Eigenschaft, mit dem Unterschied, dass sie einen anderen Anfangswert und drei zusätzliche Werte für SVG-Elemente hat.

Im folgenden Demo können Sie den Ursprung des Maskenbildes ändern. Darunter befindet sich dasselbe Bild, um den Maskeneffekt besser zu zeigen und die Bereiche für Rahmen und Innenabstand zu markieren.

Syntax

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

Anfangswert: border-box
Gilt für: Alle Elemente. In SVG gilt sie für Container-Elemente, ausgenommen das Element <defs>, alle grafischen Elemente und das Element <use>.
Vererbt: 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;

Wertdefinitionen

content-box: Die Position ist relativ zur Inhaltsbox. Der Ursprung des mask-image wird an der oberen linken Ecke des Inhaltsrandes positioniert.
padding-box: Die Position ist relativ zur Innenabstandsbox. Der Ursprung des Maskenbildes bei 0 0 wird an der oberen linken Ecke des Innenabstandsrandes positioniert, 100% 100% an der unteren rechten Ecke.
border-box: Der Standardwert, der die Position relativ zur Rahmenbox festlegt.
margin-box: Die Position ist relativ zur Außenabstandsbox.
fill-box: Die Position ist relativ zur Objekt-Bounding-Box.
stroke-box: Die Position ist relativ zur Stroke-Bounding-Box.
view-box: Verwendet den nächstgelegenen SVG-Viewport als Referenzbox. Wenn für das erzeugende Element des SVG-Viewports ein viewBox-Attribut angegeben ist, wird die Referenzbox am Ursprung des Koordinatensystems positioniert, das durch das viewBox-Attribut etabliert wurde, und die Dimension der Referenzbox wird auf die width- und height-Werte des viewBox-Attributs gesetzt.
initial: Wendet die Standardeinstellung der Eigenschaft an, die border-box ist.
inherit: Übernimmt den Wert von mask-origin des übergeordneten Elements.
unset: Entfernt den aktuellen Wert von mask-origin vom Element.

Verwendung mehrerer Werte

Diese Eigenschaft kann eine durch Kommas getrennte Liste von Werten für Maskenursprünge aufnehmen, wobei jeder Wert auf ein entsprechendes Maskenbild angewendet wird, das in der mask-image-Eigenschaft 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), url(image2.png), url(image3.png);
  mask-origin: padding-box, border-box, content-box;
}

Notizen

Für SVG-Elemente ohne zugehörige CSS-Layout-Box werden die Werte content-box, padding-box und border-box zu fill-box berechnet.
Für Elemente mit zugehöriger CSS-Layout-Box werden die Werte fill-box, stroke-box und view-box zu dem initial-Wert von mask-origin berechnet, der border-box ist.

Demo

Wenn wir das Maskenbild wiederholen, wird die erste Instanz an der oberen linken Ecke des angegebenen Positionierungsbereichs positioniert und dann von dort aus gemäß dem Wert der mask-repeat-Eigenschaft wiederholt.

Ändern Sie den Wert für mask-origin in der folgenden Demo, um eine bessere Vorstellung davon zu bekommen, was passiert.