mask-repeat
Baseline 2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die mask-repeat
CSS-Eigenschaft legt fest, wie Maskenbilder wiederholt werden. Ein Maskenbild kann entlang der horizontalen Achse, der vertikalen Achse, in beiden Richtungen oder gar nicht wiederholt werden.
Standardmäßig werden die wiederholten Bilder auf die Größe des Elements beschnitten, sie können jedoch skaliert werden, um zu passen (mit round
) oder gleichmäßig von Anfang bis Ende verteilt werden (mit space
).
Syntax
/* One-value syntax */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;
/* Two-value syntax: horizontal | vertical */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;
/* Multiple values */
mask-repeat:
space round,
no-repeat;
mask-repeat:
round repeat,
space,
repeat-x;
/* Global values */
mask-repeat: inherit;
mask-repeat: initial;
mask-repeat: revert;
mask-repeat: revert-layer;
mask-repeat: unset;
Einer oder mehrere <repeat-style>
-Werte, getrennt durch Kommas.
Werte
<repeat-style>
-
Die Ein-Wert-Syntax ist eine Kurzform für die vollständige Zwei-Wert-Syntax:
Einzelwert Äquivalent mit zwei Werten repeat-x
repeat no-repeat
repeat-y
no-repeat repeat
repeat
repeat repeat
space
space space
round
round round
no-repeat
no-repeat no-repeat
In der Zwei-Wert-Syntax repräsentiert der erste Wert das horizontale Wiederholungsverhalten und der zweite Wert das vertikale Verhalten. Hier ist eine Erklärung, wie jede Option in beiden Richtungen funktioniert:
repeat
Das Bild wird so oft wie nötig wiederholt, um den gesamten Maskenmalbereich abzudecken. Das letzte Bild wird beschnitten, wenn es nicht passt. space
Das Bild wird so oft wie möglich wiederholt, ohne beschnitten zu werden. Die ersten und letzten Bilder sind an beiden Seiten des Elements fixiert, und Leerraum wird gleichmäßig zwischen den Bildern verteilt. Die mask-position
-Eigenschaft wird ignoriert, es sei denn, nur ein Bild kann ohne Beschnitt angezeigt werden. Der einzige Fall, in dem es bei der Verwendung vonspace
zu einem Beschnitt kommt, ist, wenn nicht genug Platz vorhanden ist, um ein Bild darzustellen.round
Wenn der verfügbare Raum größer wird, dehnen sich die wiederholten Bilder aus (ohne Lücken zu hinterlassen), bis Platz für ein weiteres Bild vorhanden ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen Bilder komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Breite von 260px, das dreifach wiederholt wird, könnte sich dehnen, bis jede Wiederholung 300px breit ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf 225px komprimiert. no-repeat
Das Bild wird nicht wiederholt (und daher wird die Maskenmalfläche möglicherweise nicht vollständig abgedeckt). Die Position des nicht wiederholten Maskenbildes wird durch die mask-position
-Eigenschaft definiert.
Formale Definition
Initialer Wert | repeat |
---|---|
Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen |
Vererbt | Nein |
Berechneter Wert | Besteht aus zwei Schlüsselwörtern, einem pro Richtung |
Animationstyp | diskret |
Formale Syntax
Beispiele
Wiederholung für eine einzige Maske einstellen
<div class="masked"></div>
.masked {
width: 250px;
height: 250px;
background: blue linear-gradient(red, blue);
margin-bottom: 10px;
mask-image: url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg);
mask-repeat: repeat;
}
Unterstützung für mehrere Maskenbilder
Sie können einen anderen <repeat-style>
für jedes Maskenbild angeben, getrennt durch Kommas:
.example-three {
mask-image: url("mask1.png"), url("mask2.png");
mask-repeat: repeat-x, repeat-y;
}
Jedes Bild wird dem entsprechend angegebenen Wiederholungsstil zugeordnet, vom zuerst spezifizierten bis zum zuletzt genannten.
Spezifikationen
Specification |
---|
CSS Masking Module Level 1 # the-mask-repeat |
Browser-Kompatibilität
BCD tables only load in the browser