-webkit-mask-repeat-x

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die Eigenschaft -webkit-mask-repeat-x legt fest, 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; nur eine Kopie des Maskenbilds wird gezeichnet. Der verbleibende Inhalt 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 wiederholt, ohne abgeschnitten zu werden. Das erste und letzte Bild werden an den jeweiligen Seiten des Elements fixiert, und der verbleibende Leerraum wird gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft mask-position wird ignoriert, es sei denn, es kann nur ein Bild ohne Abschneiden angezeigt werden. Der einzige Fall, in dem mit "space" abgeschnitten wird, ist, wenn nicht genug Platz vorhanden ist, um ein Bild anzuzeigen.
round: Wenn der verfügbare Platz größer wird, dehnen sich die wiederholten Bilder (ohne Lücken) aus, bis Platz für ein weiteres Bild vorhanden ist. Wenn ein weiteres Bild hinzugefügt wird, komprimieren sich alle vorherigen, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Breite von 260px, das dreimal wiederholt wird, könnte sich bis auf eine Breite von 300px pro Wiederholung ausdehnen, bevor ein weiteres Bild hinzugefügt wird. Anschließend komprimieren sich die Bilder auf 225px Breite.

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 Maskenbilds

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 für jedes Maskenbild einen anderen <repeat-style> 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 verknüpft, in der Reihenfolge, wie sie angegeben wurden.