-webkit-mask-repeat-x

Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.

Die Eigenschaft -webkit-mask-repeat-x gibt an, ob und wie ein Maskenbild horizontal wiederholt (gekachelt) wird.

Syntax

css

/* Keyword values */
-webkit-mask-repeat-x: repeat;
-webkit-mask-repeat-x: no-repeat;
-webkit-mask-repeat-x: space;
-webkit-mask-repeat-x: round;

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

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

Werte

repeat: Das Maskenbild wird sowohl horizontal als auch vertikal wiederholt.
no-repeat: Das Maskenbild wird nicht wiederholt; es wird nur eine Kopie des Maskenbildes gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht angezeigt.
repeat: Das Maskenbild wird sowohl horizontal als auch vertikal wiederholt.
space: Das Bild wird so oft wie möglich ohne Zuschnitt wiederholt. Das erste und letzte Bild sind an beide Seiten des Elements fixiert, und der Zwischenraum wird gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft mask-position wird ignoriert, es sei denn, es kann nur ein Bild ohne Beschneidung angezeigt werden. Der einzige Fall, in dem Beschneidung unter Verwendung von space auftritt, ist, wenn nicht genug Platz vorhanden ist, um ein Bild anzuzeigen.
round: Wenn der zur Verfügung stehende Platz zunimmt, dehnen sich die wiederholten Bilder (ohne Lücken) aus, bis Platz für ein weiteres vorhanden ist. Wenn das nächste Bild hinzugefügt wird, komprimieren sich alle aktuellen, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Breite von 260px, das dreimal wiederholt wird, könnte sich ausdehnen, bis jede Wiederholung 300px breit ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf 225px komprimiert.

Formale Definition

Anfangswert	`repeat`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

-webkit-mask-repeat-x = 
  [ repeat | no-repeat | space | round ]#

Beispiele

Verwendung eines sich wiederholenden oder nicht wiederholenden Maskenbildes

css

.example-one {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: repeat;
}

.example-two {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: no-repeat;
}

Verwendung mehrerer Maskenbilder

Sie können einen anderen für jedes Maskenbild angeben, getrennt durch Kommata:

css

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

Jedes Bild wird mit dem entsprechenden Wiederholungsstil abgeglichen, vom zuerst angegebenen bis zum letzten.