CSS mask-origin Eigenschaft

Definition und Verwendung

mask-origin Diese Eigenschaft bestimmt den Ursprung der Maskierungsbildfläche (d.h. den Maskierungspositionsbereich).

Beispiel

Anzeige mask-origin Verschiedene Werte der Eigenschaft:

.masked {
  Hintergrund: grün;
  Rand: 30px fester blauer Farbe;
  Padding: 20px;
  -webkit-mask-image: url(img_circle.svg);
  mask-image: url(img_circle.svg);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask1 {
  mask-origin: border-box;
}
.mask2 {
  mask-origin: content-box;
}
.mask3 {
  mask-origin: padding-box;
}
.mask4 {
  mask-origin: fill-box;
}

Versuchen Sie es selbst

CSS-Syntax

mask-origin: border-box|content-box|padding-box|fill-box|stroke-box|view-box|initial|inherit;

Eigenschaftswert

Wert Beschreibung
border-box Position relativ zum Randkasten. Standardwert.
content-box Position relativ zum Inhaltskasten.
padding-box Position relativ zum Innenumrandungsrandkasten.
fill-box Position relativ zum Objektrandkasten.
stroke-box Position relativ zum Umrandungsrandkasten.
view-box Verwenden Sie den letzten SVG-Blickfeld als Referenzrahmen.
initial Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe initial.
inherit Diese Eigenschaft wird von ihrem Elternelement geerbt. Siehe inherit.

Technische Details

Standardwert: border-box
Vererbbarkeit: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Attribute.
Version: CSS Masking Module Level 1
JavaScript-Syntax: object.style.maskOrigin="padding-box"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

Verwandte Seiten

Tutorial:CSS-Abdeckung

Referenz:CSS mask Eigenschaft

Referenz:CSS mask-clip Eigenschaft

Referenz:CSS mask-composite Eigenschaft

Referenz:CSS mask-image Eigenschaft

Referenz:CSS mask-mode Eigenschaft

Referenz:CSS mask-position Eigenschaft

Referenz:CSS mask-repeat Eigenschaft

Referenz:CSS mask-size Eigenschaft

Referenz:CSS mask-type Eigenschaft