CSS mask-position Eigenschaft

Definition und Verwendung

mask-position Diese Eigenschaft legt den Startpunkt des Maskierungsimages (relativ zum Maskierungspositionsbereich) fest.

Tipp:Standardmäßig wird das Maskierungsimage im linken oberen Eck des Elements positioniert und in horizontaler und vertikaler Richtung wiederholt.

Beispiel

Beispiel 1

Setzen Sie den Standort des Maskierungsimages auf die Mitte:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
}

Versuchen Sie es selbst

Beispiel 2

Setzen Sie den Standort des Maskierungsimages auf die Ecke rechts unten:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
}

Versuchen Sie es selbst

CSS-Syntax

mask-position: value;

Eigenschaftswert

Wert Beschreibung
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 Wenn nur ein Schlüsselwort angegeben wird, ist der andere Wert "center".
x% y%

Der erste Wert ist die horizontale Position, der zweite Wert ist die vertikale Position.

Oben links ist 0% 0%. Unten rechts ist 100% 100%.

Wenn nur ein Wert angegeben wird, ist der andere Wert 50%.

Standardwert: 0% 0%
xpos ypos

Der erste Wert ist die horizontale Position, der zweite Wert ist die vertikale Position.

Oben links ist 0 0. Die Einheit kann Pixel (0px 0px) oder jede andere CSS-Einheit sein.

Wenn nur ein Wert angegeben wird, ist der andere Wert 50%.

Es können % und Position gemischt werden.
initial Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe: initial.
inherit Diese Eigenschaft wird von seinem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: 0% 0%
Vererbbarkeit: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Attribute.
Version: CSS Masking Modul Level 1
JavaScript-Syntax: object.style.maskPosition="100px center"

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-Verdeck

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-origin Eigenschaft

Referenz:CSS mask-repeat Eigenschaft

Referenz:CSS mask-size Eigenschaft

Referenz:CSS mask-type Eigenschaft