-webkit-mask-repeat-y

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-y gibt an, ob und wie ein Maskenbild vertikal wiederholt wird.

/* Keyword values */
-webkit-mask-repeat-y: repeat;
-webkit-mask-repeat-y: no-repeat;
-webkit-mask-repeat-y: space;
-webkit-mask-repeat-y: round;

/* Multiple values */
-webkit-mask-repeat-y: repeat, no-repeat, space;

/* Global values */
-webkit-mask-repeat-y: inherit;
-webkit-mask-repeat-y: initial;
-webkit-mask-repeat-y: unset;

Initialwertrepeat
Anwendbar aufalle Elemente
VererbtNein
Medienvisuell
Berechneter Wertfür length der absolute Wert, ansonsten ein Prozentwert
Animationstypdiskret
Kanonische ReihenfolgeReihenfolge des Auftretens in der formalen Grammatik der Werte

Syntax

Werte

repeat
Das Maskenbild wird vertikal wiederholt.
no-repeat
Das Maskenbild wird nicht vertikal wiederholt, nur eine Kopie des Maskenbildes wird in vertikaler Richtung gezeichnet. Der vertikale 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 werden am oberen und unteren Rand des Elements fixiert, und Leerräume werden 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 vertikale Raum größer wird, dehnen sich die wiederholten Bilder (ohne Lücken), bis Platz für einen weiteren Platz ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Höhe von 260 Pixeln, das dreimal wiederholt wird, kann sich dehnen, bis jede Wiederholung 300 Pixel hoch ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf eine Höhe von 225px komprimieren.

Formale Syntax

repeat | no-repeat | space | round

Beispiel

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

.exampletwo {
  -webkit-mask-image: url('mask.png');
  -webkit-mask-repeat-y: 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-y: 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

-webkit-mask-repeat, -webkit-mask-repeat-x

Verwandte Themen