-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

<repeat-style>#

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

-webkit-mask (en-US), -webkit-mask-box-image (en-US), -webkit-mask-clip (en-US), -webkit-mask-origin, -webkit-mask-attachment (en-US), -webkit-mask-image (en-US), -webkit-mask-composite (en-US)