-webkit-mask-repeat

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.

Übersicht

Die -webkit-mask-repeat Eigenschaft gibt an, ob und wie ein Maskenbild wiederholt (gekachelt) wird.

Initialwertno-repeat
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs (en-US) Elements und allen Grafikelementen
VererbtNein
Berechneter WertBesteht aus zwei Schlüsselwörtern, einem pro Richtung
Animationstypdiskret

Syntax

/* Einzelne Schlüsselwortwerte */
-webkit-mask-repeat: repeat;
-webkit-mask-repeat: repeat-x;
-webkit-mask-repeat: repeat-y;
-webkit-mask-repeat: no-repeat;

/* Mehrer Schlüsselwortwerte */
-webkit-mask-repeat: repeat, repeat-x, no-repeat;

/* Globale Werte */
-webkit-mask-repeat: inherit;
-webkit-mask-repeat: initial;
-webkit-mask-repeat: unset;

Werte

repeat
Das Maskenbild wird horizontal und vertikal wiederholt.
repeat-x
Das Maskenbild wird nur horizontal wiederholt.
repeat-y
Das Maskenbild wird nur 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 dargestellt.

Formale Syntax

mask-repeat = 
<repeat-style>#

<repeat-style> =
repeat-x |
repeat-y |
[ repeat | space | round | no-repeat ]{1,2}

Beispiele

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

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

Unterstützung mehrerer Maskenbilder

Für jedes Maskenbild kann ein unterschiedlicher <repeat-style> Wert angegeben werden, der durch Kommas getrennt wird:

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

Jedes Bild wird dem zugehörigen Wiederholungsstil zugeordnet, vom zuerst bis zum zuletzt angegebenen.

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)

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 1.0 Nicht unterstützt Nicht unterstützt Nicht unterstützt 4.0
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung 2.1 ? ? ? 3.2

Siehe auch