-webkit-mask-repeat-y
Kein Standard: Diese Funktion ist nicht standardisiert und befindet sich nicht im Standardisierungsprozess. Verwenden Sie sie nicht auf Produktionsseiten, die auf das Web ausgerichtet sind: Sie wird nicht für alle Benutzer funktionieren. Außerdem kann es große Inkompatibilitäten zwischen Implementierungen geben und das Verhalten kann sich in Zukunft ändern.
Die Eigenschaft -webkit-mask-repeat-y
legt fest, ob und wie ein Maskenbild vertikal wiederholt (gekachelt) wird.
Syntax
/* 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: revert;
-webkit-mask-repeat-y: revert-layer;
-webkit-mask-repeat-y: unset;
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.
- repeat
-
Das Maskenbild wird vertikal wiederholt.
- space
-
Das Bild wird so oft wie möglich ohne Abschneiden wiederholt. Das erste und letzte Bild sind an den oberen und unteren Rand des Elements angeheftet, und der Leerraum wird gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft
mask-position
wird ignoriert, es sei denn, nur ein Bild kann ohne Abschneiden angezeigt werden. Der einzige Fall, in dem beim Verwenden von space eine Abschneidung erfolgt, ist, wenn nicht genug Platz vorhanden ist, um ein Bild anzuzeigen. - round
-
Wenn der verfügbare vertikale Raum zunimmt, dehnen sich die wiederholten Bilder (ohne Lücken) aus, bis Platz für ein weiteres Bild vorhanden ist. Wenn das nächste Bild hinzugefügt wird, komprimieren sich alle aktuellen Bilder, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Höhe von 260px, das dreimal wiederholt wird, könnte sich dehnen, bis jede Wiederholung 300px hoch ist, und dann wird ein weiteres Bild hinzugefügt. Sie komprimieren sich dann auf eine Höhe von 225px.
Offizielle Definition
Initialer Wert | repeat |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | für length der absolute Wert, ansonsten ein Prozentwert |
Animationstyp | diskret |
Offizielle Syntax
-webkit-mask-repeat-y = repeat | no-repeat | space | round
Beispiele
Verwendung eines wiederholten oder nicht wiederholten Maskenbildes
.example-one {
-webkit-mask-image: url("mask.png");
-webkit-mask-repeat-y: repeat;
}
.example-two {
-webkit-mask-image: url("mask.png");
-webkit-mask-repeat-y: no-repeat;
}
Verwendung mehrerer Maskenbilder
Sie können für jedes Maskenbild einen anderen <repeat-style>
angeben, getrennt durch Kommas:
.example-three {
-webkit-mask-image: url("mask1.png"), url("mask2.png");
-webkit-mask-repeat-y: repeat, space;
}
Jedes Bild wird mit dem entsprechenden Wiederholungsstil vom zuerst angegebenen bis zum letzten zugeordnet.
Spezifikationen
Nicht Teil eines Standards.
Browser-Kompatibilität
BCD tables only load in the browser