mask-repeat

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;

Werte

Die mask-repeat-Eigenschaft ist eine kommagetrennte Liste von zwei <repeat-style> Werten, wobei der erste <repeat-style> Wert den horizontalen Wiederholungswert und der zweite Wert den vertikalen Wiederholungswert darstellt, oder ein Schlüsselwortwert, der eine Kurzform für zwei <repeat-style> Werte ist.

<repeat-style> Werte

Die <repeat-style> Werte umfassen:

repeat

Das Bild wird so oft wiederholt, wie nötig, um den gesamten Maskenmalbereich zu bedecken. Maskenbilder entlang der Ränder werden abgeschnitten, wenn die Größe der mask origin box kein genaues Vielfaches der Größe des Maskenbildes ist.

space

Das Maskenbild wird so oft wie möglich wiederholt, ohne abgeschnitten zu werden. Wenn die Ursprungsgröße des Elements mindestens doppelt so groß ist wie die Größe des Maskenbildes in der entsprechenden Dimension, wird die mask-position Eigenschaft ignoriert und die ersten und letzten Bilder werden an den Rändern des Maskenursprung-Containers positioniert. Wenn die Maskenursprungsbox kein genaues Vielfaches der Größe des Maskenbildes ist, wird der Leerraum gleichmäßig zwischen den wiederholten Maskenbildern verteilt.

Wenn die Größe der Ursprungsbox in der gegebenen Dimension kleiner als doppelt so groß wie das Maskenbild ist, kann nur ein Maskenbild dargestellt werden. In diesem Fall wird das Bild entsprechend der mask-position-Eigenschaft positioniert, die standardmäßig auf 0% 0% gesetzt ist. Das Maskenbild wird nur abgeschnitten, wenn das Maskenbild größer ist als die Maskenursprungsbox.

round

Das Maskenbild wird so oft wie möglich in seinen ursprünglichen Dimensionen wiederholt. Wenn die Größe der Maskenursprungsbox kein genaues Vielfaches der Größe des Maskenbildes ist, werden alle Maskenbilder neu skaliert, indem sie verkleinert oder gestreckt werden, um sicherzustellen, dass keine Wiederholungen abgeschnitten werden.

no-repeat

Das Maskenbild wird nicht wiederholt (und daher wird der Maskenmalbereich möglicherweise nicht vollständig bedeckt). Die Position des nicht wiederholten Maskenbildes wird durch die mask-position CSS-Eigenschaft definiert.

Kurzform-Werte

Die Ein-Wert-Syntax ist eine Kurzform für die vollständige Zwei-Wert-Syntax:

repeat-x

Das Äquivalent von repeat no-repeat. Das Bild wird in horizontaler Richtung so oft wiederholt, wie es benötigt wird, um die Breite des Maskenmalbereichs zu bedecken. Maskenbilder entlang der rechten oder linken Kanten oder beider, je nach dem Wert von mask-position, werden abgeschnitten, wenn die Breite der Maskenursprungsbox kein genaues Vielfaches der Breite des Maskenbildes ist.

repeat-y

Das Äquivalent von no-repeat repeat. Das Bild wird in vertikaler Richtung so oft wiederholt, wie es benötigt wird, um die Höhe des Maskenmalbereichs zu bedecken. Maskenbilder entlang der oberen oder unteren Kanten oder beider, je nach dem Wert von mask-position, werden abgeschnitten, wenn die Höhe der Maskenursprungsbox kein genaues Vielfaches der Höhe des Maskenbildes ist.

Beschreibung

Die mask-repeat-Eigenschaft akzeptiert ein kommagetrenntes Paar von Werten oder einen Kurzformwert. In der Zwei-Werte-Syntax repräsentiert der erste Wert das horizontale Wiederholungsverhalten und der zweite Wert das vertikale Verhalten.

Mehrere Werte

Jeder mask-repeat Wert in dieser kommagetrennten Liste gilt für eine separate Maskenebene. Ein Element kann mehrere Maskenebenen haben. Die Anzahl der Ebenen wird durch die Anzahl der kommagetrennten Werte im Wert der mask-image Eigenschaft bestimmt (auch wenn ein Wert none ist). Jeder mask-repeat Wert wird mit den mask-image Werten in Reihenfolge zugeordnet. Wenn die Anzahl der Werte in den beiden Eigenschaften unterschiedlich ist, werden überschüssige mask-repeat Werte ignoriert, oder wenn mask-repeat weniger Werte hat als mask-image, werden die mask-repeat Werte wiederholt.

Größe und Positionierung

Der Wert der mask-repeat-Eigenschaft definiert, wie Maskenbilder gekachelt werden, nachdem sie vergrößert und positioniert wurden. Die erste (und möglicherweise einzige) Maskenbildwiederholung wird durch die mask-position Eigenschaft positioniert, die standardmäßig auf 0% 0%, die obere linke Ecke der Ursprungsbox, gesetzt ist. Die Größe wird durch die mask-size Eigenschaft definiert, die standardmäßig auf auto gesetzt ist. Die Positionen der wiederholten Masken basieren auf dieser initialen Maskeninstanz.

Abschneiden

Maskenbilder werden nicht wiederholt, sondern abgeschnitten, wenn die Größe des Maskenbildes größer ist als die Ursprungsbox, außer im Falle von round, bei dem eine einzelne Maske verkleinert wird, um in die Ursprungsbox zu passen.

Bei repeat Werten können Maskenbilder am Rand der Ursprungsbox abgeschnitten werden, wenn die Dimension (Breite oder Höhe) der Box kein genaues Vielfaches der Maske ist.

Seitenverhältnis

Standardmäßig beibehalten Maskenbilder das vom mask-size festgelegte Seitenverhältnis oder ihr Standard-Seitenverhältnis, wenn mask-size auf auto gesetzt ist oder explizit auf auto gesetzt wurde. Nur bei dem round Wert in beide Richtungen kann das Seitenverhältnis der Maske verzerrt werden.

Wenn round in beide Richtungen eingestellt ist, werden die resultierenden wiederholten Maskenbilder das Seitenverhältnis der Ursprungsbox nachbilden. Da die Maskenbilder skaliert werden, um zu passen, können sie verzerrt sein, um sicherzustellen, dass die Maskenbilder nicht abgeschnitten werden. Wenn round nur in einer Dimension eingestellt ist, wird das Seitenverhältnis der Maskengröße respektiert.

Gerundete Wiederholungen

Im Falle von round werden Maskenbilder hoch- oder herunterskaliert, um das Maskenbild in den Positionierungsbereich eine ganze Anzahl von Malen einzupassen. Die Maskengröße erhöht oder verringert sich, um die nächstliegende natürliche Zahl an Masken zu passen, mit einem Minimum von einer Maske.

Die gerenderten Abmessungen der Maske sind die Größe der Ursprungsbox geteilt durch die Anzahl der Iterationen der Masken in dieser Dimension, wobei die Iterationen eine ganze Zahl größer als null sind. Die Anzahl der Iterationen ist: X' = D / round(D / X), wobei D die Breite oder Höhe ist, und round() eine Funktion ist, die die nächstliegende ganze Zahl größer als null zurückgibt.

Zum Beispiel, wenn mask-repeat auf round gesetzt ist und die mask-size die Maske auf 40px Breite einstellt, wird in der Ursprungsbox (größer als 0px Breite) aber kleiner als 60px breit, eine einzige Iteration, die 100% der Breite dieser Box ist. Wenn die Box mindestens 60px breit, aber kleiner als 100px breit ist, wird es zwei Iterationen geben, die jeweils 50% der Box sind. Von 100px bis 140px passen drei Masken entlang der horizontalen Achse. Diese "40px breite" Masken sind nur 40px breit, wenn die Ursprungsbox ein genaues Vielfaches von 40px ist.

Formale Definition

Formale Syntax

mask-repeat = 
  <repeat-style>#  

<repeat-style> = 
  repeat-x           |
  repeat-y           |
  <repetition>{1,2}  

<repetition> = 
  repeat     |
  space      |
  round      |
  no-repeat  

Beispiele

Grundlegende Nutzung

Dieses Beispiel zeigt das Setzen der mask-repeat-Eigenschaft für eine einzelne Maske.

HTML

Unser HTML enthält ein einfaches <div> Element:

<div></div>

CSS

Wir definieren ein 250px Quadrat mit einem von Rot zu Blau verlaufenden Farbverlauf mit einem 100px mal 100px großen Stern als Maskenbild. Wir verwenden die mask-repeat-Eigenschaft, indem wir round für die horizontale Richtung und space für den vertikalen Wert setzen.

div {
  width: 250px;
  height: 250px;
  background-image: linear-gradient(red, blue);

  mask-image: url("/shared-assets/images/examples/mask-star.svg");
  mask-size: 100px 100px;

  mask-repeat: round space;
}

Ergebnisse

Mit space und round auf einem Maskenbild, das kleiner ist als die Ursprungsbox, wird die Maske nicht abgeschnitten. Vielmehr verzerrt der round Wert den Stern, um das Abschneiden zu verhindern und verhindert den Leerraum, während space das Seitenverhältnis des Sterns beibehält, aber Raum nach Bedarf zwischen Masken hinzufügt.

Runde Iterationen

Mit dem gleichen HTML und CSS zeigt diese Demonstration einen Schieberegler, der die Breite des Containers ändert, um zu zeigen, wie bei Verwendung von round, Masken wachsen, sobald Platz vorhanden ist, bis eine weitere Iteration der Maske passt, oder schrumpfen, bis die Anzahl der Iterationen nicht mehr passt.

<div></div>
<label
  >width: <span></span><br />
  <input type="range" min="0" max="400" value="250" id="width" />
</label>

div {
  width: 250px;
  height: 250px;
  background-image: linear-gradient(red, blue);

  mask-image: url("/shared-assets/images/examples/mask-star.svg");
  mask-size: 100px 100px;

  mask-repeat: round space;
}
input {
  clear: both;
  width: 90%;
}

const div = document.querySelector("div");
const range = document.getElementById("width");
const output = document.querySelector("span");

range.addEventListener("change", () => {
  const value = `${range.value}px`;
  output.innerText = value;
  div.style.width = value;
});

Die Maske ist auf 100px Breite definiert. Es gibt einen einzelnen Stern, wenn die Ursprungsbox von 1px bis 149px Breite reicht, zwei Sterne von 150px bis 249px, drei Sterne von 250px bis 349px und so weiter.

Die Kurzformwerte

Dieses Beispiel demonstriert alle mask-repeat Kurzform (einzelnes Schlüsselwort) Werte.

HTML

Wir fügen mehrere <section> Elemente ein, die jeweils ein <div> enthalten, jedes mit einem anderen Klassennamen.

<section class="repeat">
  <div></div>
</section>
<section class="space">
  <div></div>
</section>
<section class="round">
  <div></div>
</section>
<section class="no-repeat">
  <div></div>
</section>
<section class="repeat-x">
  <div></div>
</section>
<section class="repeat-y">
  <div></div>
</section>

CSS

Wir geben jedem <div> das gleiche CSS, außer für den mask-repeat Wert, den wir dem Klassennamen des Elternteils anpassen. Wir definieren eine Maskengröße und setzen das initiale mask-image unten rechts, was bedeutet, dass jegliches Abschneiden auf den oberen und linken Masken auf deren oberen und linken Seiten erfolgt.

div {
  width: 180px;
  height: 180px;
  background-image: linear-gradient(red, blue);

  mask-image: url("/shared-assets/images/examples/mask-star.svg");

  mask-size: 50px 50px;
  mask-position: bottom right;
}

.repeat div {
  mask-repeat: repeat;
}
.space div {
  mask-repeat: space;
}
.round div {
  mask-repeat: round;
}
.no-repeat div {
  mask-repeat: no-repeat;
}
.repeat-x div {
  mask-repeat: repeat-x;
}
.repeat-y div {
  mask-repeat: repeat-y;
}

Wir zeigen den Klassennamen mit generiertem Inhalt an.

section::before {
  content: attr(class);
  display: block;
  text-align: center;
  border-bottom: 1px solid;
}

body {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}
section {
  border: 1px solid;
}

Ergebnisse

Der erste (und im Fall von no-repeat einzige) Maskenstern wird größenmäßig angepasst, um 50px mal 50px zu sein, und positioniert an der unteren rechten Ecke des Malbereichs, mit wiederholten Sternen, die darüber und/oder links davon platziert werden, wobei jegliches Abschneiden auf den oberen und linken Seiten des obersten und linken Sterns in Richtung des oberen und linken Maskensterns erfolgt. Beachten Sie, dass alle Sterne die gleiche Größe und Form haben, außer für round, bei dem alle Masken auf 45px x 45px geschrumpft sind, um vier vollständige Masken in jede Richtung zu passen. Hätte der Container 174px gehabt, gäbe es drei Sterne in jede Richtung, anstelle von vier, und jeder Stern wäre gestreckt worden.

Mehrere Maskenbilder und Wiederholungen

Sie können für jedes Maskenbild einen anderen <repeat-style> angeben, getrennt durch Kommata:

.extra-repeats {
  mask-image: url("mask1.png"), url("mask2.png");
  mask-repeat: repeat-x, repeat-y, space;
}

Jedes Bild wird mit dem entsprechenden Wiederholungsstil abgeglichen. Da mehr mask-repeat Werte vorhanden sind als mask-image Werte, werden die überschüssigen mask-repeat Werte ignoriert.

.missing-repeats {
  mask-image:
    url("mask1.png"), url("mask2.png"), url("mask3.png"), url("mask4.png");
  mask-repeat: repeat-x, repeat-y;
}

Jedes Bild wird mit einem entsprechenden Wiederholungsstil abgeglichen. Da mehr mask-image Werte vorhanden sind als mask-repeat Werte, wird die mask-repeat wiederholt, bis jedes mask-image einen zugeordneten mask-repeat Wert hat. Hier wiederholen sich ungeradzahlig nummerierte Masken entlang der x-Achse, während sich geradzahlig nummerierte Masken entlang der y-Achse wiederholen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• background-repeat
• mask-border-repeat
• Einführung in CSS-Maskierung
• CSS mask Eigenschaften
• Mehrere Masken deklarieren
• CSS-Maskierung Modul