Svojstvo mask-repeat

Svojstvo mask-repeat zadaje način ponavljanja maske, ako su njene dimenzije manje od dimenzija elementa. Radi analogno svojstvu background-repeat, ali se primenjuje na maske.

Sintaksa

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

Vrednosti

Primer . Bez ponavljanja (no-repeat)

Jedno srce u centru bez ponavljanja:

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;
}

Результат:

Primer . Ponavljanje horizontalno (repeat-x)

Srca se ponavljaju samo horizontalno:

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;
}

Результат:

Primer . Ponavljanje vertikalno (repeat-y)

Srca se ponavljaju samo vertikalno:

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;
}

Результат:

Primer . Ponavljanje sa razmacima (space)

Srca su ravnomerno raspoređena sa razmacima:

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

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

Результат:

Primer . Skalirajuće ponavljanje (round)

Srca se skaliraju za ravnomerno popunjavanje:

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

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

Результат:

Vidite takođe