-webkit-mask-repeat-x

Kein Standard

Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zug├Ąnglich sind, benutzt werden: Sie wird nicht f├╝r alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilit├Ąten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften k├Ânnten in der Zukunft ver├Ąndert werden.

 

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

/* 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: unset;

Initialwertrepeat
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Syntax

Werte

repeat
Das Maskenbild wird sowohl horizontal als auch vertikal wiederholt.
no-repeat
Das Maskenbild wird nicht wiederholt, nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht angezeigt.
space
Das Bild wird so oft wie m├Âglich wiederholt, ohne zu beschneiden. Das erste und das letzte Bild sind an jeder Seite des Elements angeheftet und Leerr├Ąume sind gleichm├Ą├čig zwischen den Bildern verteilt. Die Eigenschaft mask-position (en-US) wird ignoriert, es sei denn, nur ein Bild kann ohne ├ťbersteuerung angezeigt werden. Der einzige Fall, in dem Clipping mit Leerzeichen auftritt, ist, wenn nicht gen├╝gend Platz vorhanden ist, um ein Bild anzuzeigen.
round
Wenn der erlaubte Platz vergr├Â├čert wird, werden sich die wiederholten Bilder dehnen (ohne L├╝cken zu hinterlassen), bis Platz f├╝r einen weiteren Platz vorhanden ist. Wenn das n├Ąchste Bild hinzugef├╝gt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer urspr├╝nglichen Breite von 260 Pixeln, das dreimal wiederholt wird, k├Ânnte sich dehnen, bis jede Wiederholung 300 Pixel breit ist, und dann wird ein weiteres Bild hinzugef├╝gt. Sie werden dann auf 225px komprimieren.

Formale Syntax

repeat | no-repeat | space | round

Beispiel

.exampleone {
  -webkit-mask-image: url('mask.png');
  -webkit-mask-repeat-x: repeat;
}

.exampletwo {
  -webkit-mask-image: url('mask.png');
  -webkit-mask-repeat-x: no-repeat;
}

Support f├╝r mehrere Bildmasken

Sie k├Ânnen f├╝r jedes Maskenbild, getrennt durch Kommas, einen anderen <repeat-style> angeben:

.examplethree {
  -webkit-mask-image: url('mask1.png'), url('mask2.png');
  -webkit-mask-repeat-x: repeat, space;
}

Jedes Bild wird mit dem entsprechenden Wiederholungsstil verglichen, vom ersten bis zum letzten.

Browser-Kompatibilit├Ąt

Wir konvertieren die Kompatibilit├Ątsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilit├Ątstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support Nicht unterst├╝tzt[1] Nicht unterst├╝tzt Nicht unterst├╝tzt Nicht unterst├╝tzt[1] ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

[1] W├Ąhrend die Eigenschaft selbst erkannt wird, akzeptiert sie keine Werte.

Sehenswert

-webkit-mask-repeat, -webkit-mask-repeat-y