-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.
Initialwert | no-repeat |
---|---|
Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs (en-US) Elements und allen Grafikelementen |
Vererbt | Nein |
Berechneter Wert | Besteht aus zwei Schlüsselwörtern, einem pro Richtung |
Animationstyp | diskret |
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
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 |