Proprietà mask-repeat

La proprietà mask-repeat definisce il modo in cui una maschera si ripete se le sue dimensioni sono inferiori a quelle dell'elemento. Funziona in modo simile a background-repeat, ma viene applicata alle maschere.

Sintassi

cssselettore {
  mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}

Valori

Esempio . Senza ripetizione (no-repeat)

Un singolo cuore al centro, senza ripetizione:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 100px;
  mask-repeat: no-repeat;
}

Результат:

Esempio . Ripetizione orizzontale (repeat-x)

I cuori si ripetono solo orizzontalmente:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: left center;
  mask-size: 50px;
  mask-repeat: repeat-x;
}

Результат:

Esempio . Ripetizione verticale (repeat-y)

I cuori si ripetono solo verticalmente:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center top;
  mask-size: 50px;
  mask-repeat: repeat-y;
}

Результат:

Esempio . Ripetizione con spaziatura (space)

I cuori sono distribuiti uniformemente con spaziature:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-size: 80px;
  mask-repeat: space;
}

Результат:

Esempio . Ripetizione con ridimensionamento (round)

I cuori vengono ridimensionati per riempire l'area in modo uniforme:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-size: 80px;
  mask-repeat: round;
}

Результат:

Vedi anche