-webkit-mask-repeat-x
Kein Standard: Diese Funktion ist nicht standardisiert und befindet sich nicht im Standardisierungsprozess. Verwenden Sie sie nicht auf Produktionsseiten, die auf das Web ausgerichtet sind: Sie wird nicht für alle Benutzer funktionieren. Außerdem kann es große Inkompatibilitäten zwischen Implementierungen geben und das Verhalten kann sich in Zukunft ändern.
Die Eigenschaft -webkit-mask-repeat-x
gibt an, 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; es wird nur eine Kopie des Maskenbilds 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 Zuschneiden wiederholt. Die ersten und letzten Bilder werden an die Seiten des Elements gepinnt, und der Leerraum wird gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft
mask-position
wird ignoriert, es sei denn, es kann nur ein Bild ohne Zuschneiden dargestellt werden. Clipping tritt nur auf, wenn nicht genügend Platz vorhanden ist, um ein Bild darzustellen. - round
-
Wenn der verfügbare Platz größer wird, werden die wiederholten Bilder gestreckt (ohne Lücken), bis Platz für ein weiteres Bild vorhanden ist. Beim Hinzufügen eines neuen Bildes werden alle aktuellen Bilder 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. Danach werden sie auf 225px komprimiert.
Formale Definition
Initialer Wert | 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 wiederholten oder nicht wiederholten Maskenbildes
.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 unterschiedlichen <repeat-style>
für jedes Maskenbild angeben, getrennt durch Kommas:
.example-three {
-webkit-mask-image: url("mask1.png"), url("mask2.png");
-webkit-mask-repeat-x: repeat, space;
}
Jedes Bild wird mit dem entsprechenden Wiederholungsstil von zuerst angegeben bis zuletzt abgestimmt.
Spezifikationen
Teil keines Standards.
Browser-Kompatibilität
BCD tables only load in the browser