-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
/* 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 wiederholt, ohne abgeschnitten zu werden. Das erste und letzte Bild werden an beiden Seiten des Elements befestigt, und der Leerraum wird gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft
mask-positionwird ignoriert, es sei denn, es kann nur ein Bild ohne Zuschneiden angezeigt werden. Der einzige Fall, in dem beim Verwenden von space ein Zuschneiden erfolgt, ist, wenn nicht genug Platz vorhanden ist, um ein Bild darzustellen. - round
-
Wenn der verfügbare Platz wächst, werden die wiederholten Bilder gedehnt (sodass keine Lücken entstehen), bis Platz für ein weiteres Bild ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen Bilder komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer Originalbreite von 260px, das dreimal wiederholt wird, kann sich dehnen, 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 wiederholenden oder nicht wiederholenden 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 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 abgestimmt, vom zuerst angegebenen bis zum letzten.
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
Loading…