mask-repeat

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die mask-repeat CSS-Eigenschaft legt fest, wie Maskenbilder wiederholt werden. Ein Maskenbild kann entlang der horizontalen Achse, der vertikalen Achse, in beiden Richtungen oder gar nicht wiederholt werden.

Standardmäßig werden die wiederholten Bilder auf die Größe des Elements beschnitten, sie können jedoch skaliert werden, um zu passen (mit round) oder gleichmäßig von Anfang bis Ende verteilt werden (mit space).

Syntax

css

/* One-value syntax */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/* Two-value syntax: horizontal | vertical */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

/* Multiple values */
mask-repeat:
  space round,
  no-repeat;
mask-repeat:
  round repeat,
  space,
  repeat-x;

/* Global values */
mask-repeat: inherit;
mask-repeat: initial;
mask-repeat: revert;
mask-repeat: revert-layer;
mask-repeat: unset;

Einer oder mehrere <repeat-style>-Werte, getrennt durch Kommas.

Werte

<repeat-style>

Die Ein-Wert-Syntax ist eine Kurzform für die vollständige Zwei-Wert-Syntax:

Einzelwert	Äquivalent mit zwei Werten
`repeat-x`	`repeat no-repeat`
`repeat-y`	`no-repeat repeat`
`repeat`	`repeat repeat`
`space`	`space space`
`round`	`round round`
`no-repeat`	`no-repeat no-repeat`

In der Zwei-Wert-Syntax repräsentiert der erste Wert das horizontale Wiederholungsverhalten und der zweite Wert das vertikale Verhalten. Hier ist eine Erklärung, wie jede Option in beiden Richtungen funktioniert:

`repeat`	Das Bild wird so oft wie nötig wiederholt, um den gesamten Maskenmalbereich abzudecken. Das letzte Bild wird beschnitten, wenn es nicht passt.
`space`	Das Bild wird so oft wie möglich wiederholt, ohne beschnitten zu werden. Die ersten und letzten Bilder sind an beiden Seiten des Elements fixiert, und Leerraum wird gleichmäßig zwischen den Bildern verteilt. Die `mask-position`-Eigenschaft wird ignoriert, es sei denn, nur ein Bild kann ohne Beschnitt angezeigt werden. Der einzige Fall, in dem es bei der Verwendung von `space` zu einem Beschnitt kommt, ist, wenn nicht genug Platz vorhanden ist, um ein Bild darzustellen.
`round`	Wenn der verfügbare Raum größer wird, dehnen sich die wiederholten Bilder aus (ohne Lücken zu hinterlassen), bis Platz für ein weiteres Bild vorhanden ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen Bilder komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Breite von 260px, das dreifach wiederholt wird, könnte sich dehnen, bis jede Wiederholung 300px breit ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf 225px komprimiert.
`no-repeat`	Das Bild wird nicht wiederholt (und daher wird die Maskenmalfläche möglicherweise nicht vollständig abgedeckt). Die Position des nicht wiederholten Maskenbildes wird durch die `mask-position`-Eigenschaft definiert.

Formale Definition

Anfangswert	`repeat`
Anwendbar auf	alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des `<defs>` Elements und allen Grafikelementen
Vererbt	Nein
Berechneter Wert	Besteht aus zwei Schlüsselwörtern, einem pro Richtung
Animationstyp	diskret

Formale Syntax

mask-repeat = 
  <repeat-style>#  

<repeat-style> = 
  repeat-x                                     |
  repeat-y                                     |
  [ repeat | space | round | no-repeat ]{1,2}

Beispiele

Wiederholung für eine einzige Maske einstellen

html

<div class="masked"></div>

css

.masked {
  width: 250px;
  height: 250px;
  background: blue linear-gradient(red, blue);
  margin-bottom: 10px;

  mask-image: url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg);
  mask-repeat: repeat;
}

Unterstützung für mehrere Maskenbilder

Sie können einen anderen <repeat-style> für jedes Maskenbild angeben, getrennt durch Kommas:

css

.example-three {
  mask-image: url("mask1.png"), url("mask2.png");
  mask-repeat: repeat-x, repeat-y;
}

Jedes Bild wird dem entsprechend angegebenen Wiederholungsstil zugeordnet, vom zuerst spezifizierten bis zum zuletzt genannten.

Spezifikationen

Specification
CSS Masking Module Level 1 # the-mask-repeat

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Clipping und Masking in CSS