CSS mask-repeat Eigenschaft

Definition und Verwendung

mask-repeat Die Eigenschaft legt fest, ob und wie das Maskierungsimage wiederholt wird.

Standardmäßig wird das Maskierungsimage in der vertikalen und horizontalen Richtung wiederholt.

Beispiel

Beispiel 1

Verwenden mask-repeat: no-repeat; und mask-repeat: repeat;:

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

Versuchen Sie es selbst

Beispiel 2

Verwenden mask-repeat: round; und mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

Versuchen Sie es selbst

Beispiel 3

Verwenden mask-repeat: repeat-x; und mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

Versuchen Sie es selbst

CSS-Syntax

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

Eigenschaftswert

Wert Beschreibung
repeat

Das Maskierungsimage wird in der vertikalen und horizontalen Richtung wiederholt.

Wenn das letzte Bild nicht合适, wird es zugeschnitten.

Das ist der Standardwert.
repeat-x Das Maskierungsimage wird nur in der horizontalen Richtung wiederholt.
repeat-y Das Maskierungsimage wird nur in der vertikalen Richtung wiederholt.
space

Die Maskierungsimage wird so oft wie möglich wiederholt, ohne zugeschnitten zu werden.

Das erste und letzte Bild werden an den Seiten des Elements festgelegt, und der leere Raum zwischen den Bildern wird gleichmäßig verteilt.
round Das Maskierungsimage wird wiederholt und wird gestaucht oder gestreckt, um den Raum auszufüllen (ohne Lücken).
no-repeat Die Maskierungsimage wird nicht wiederholt. Das Bild wird nur einmal angezeigt.
initial Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: repeat
Vererbbarkeit: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS Masking Modul Level 1
JavaScript-Syntax: object.style.maskRepeat="no-repeat"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

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

Referenz:CSS mask-position Eigenschaft

Referenz:CSS mask-size Eigenschaft

Referenz:CSS mask-type Eigenschaft