Lastnost mask-repeat

Lastnost mask-repeat določa način ponavljanja maske, če so njene dimenzije manjše od dimenzij elementa. Deluje podobno kot background-repeat, vendar se uporablja za maske.

Sintaksa

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

Vrednosti

Primer . Brez ponavljanja (no-repeat)

Eno srce v sredini brez 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 vodoravno (repeat-x)

Srca se ponavljajo le vodoravno:

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 navpično (repeat-y)

Srca se ponavljajo le navpično:

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 s presledki (space)

Srca so enakomerno porazdeljena s presledki:

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 . Skalirno ponavljanje (round)

Srca se skalirajo za enakomerno polnjenje:

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

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

Результат:

Glejte tudi