-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
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische ReihenfolgeReihenfolge des Auftretens in der formalen Grammatik der Werte

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 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!

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