-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
/* 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
.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:
.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.
Spezifikationen
Kein Teil eines Standards.