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, entlang beider Achsen oder gar nicht wiederholt werden.

Standardmäßig werden die wiederholten Bilder auf die Größe des Elements zugeschnitten, sie können jedoch auch skaliert werden, um zu passen (mit round) oder gleichmäßig von Ende zu 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 Kommata.

Werte

<repeat-style>

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

Einzelwert	Entsprechender Zwei-Wert
`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 jeder Richtung funktioniert:

`repeat`	Das Bild wird so oft wie nötig wiederholt, um das gesamte Maskenbemalungsgebiet zu bedecken. Das letzte Bild wird abgeschnitten, wenn es nicht passt.
`space`	Das Bild wird so oft wie möglich ohne Beschneiden wiederholt. Die ersten und letzten Bilder werden an beiden Seiten des Elements fixiert, und Leerraum wird gleichmäßig zwischen den Bildern verteilt. Die `mask-position`-Eigenschaft wird ignoriert, es sei denn, es kann nur ein Bild ohne Beschneiden angezeigt werden. Der einzige Fall, in dem mit `space` geschnitten wird, ist, wenn nicht genügend Platz vorhanden ist, um ein Bild anzuzeigen.
`round`	Wenn der verfügbare Platz größer wird, dehnen sich die wiederholten Bilder, um keine Lücken zu lassen, bis Platz für ein weiteres Bild vorhanden ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Breite von 260px, das dreimal 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 das Maskenbemalungsgebiet nicht unbedingt vollständig abgedeckt). Die Position des nicht wiederholten Maskenbildes wird durch die `mask-position` CSS-Eigenschaft definiert.

Formale Definition

Initialer Wert	`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}

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

Jedes Bild wird dem entsprechenden Wiederholungsstil zugeordnet, vom zuerst angegebenen bis zum zuletzt.

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Clipping und Maskierung in CSS