mask-repeat қасиеті

mask-repeat қасиеті масканың өлшемдері элементтің өлшемдерінен кіші болған жағдайда оны қайталау әдісін көрсетеді. background-repeat сияқты жұмыс істейді, бірақ маскаларға қолданылады.

Синтаксис

cssселектор {
  mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}

Мәндері

Мысал . Қайталанбайтын (no-repeat)

Ортадағы бір жүрек, қайталмайды:

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

Результат:

Мысал . Көлденең бағытта қайталау (repeat-x)

Жүректер тек көлденең бағытта қайталанады:

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

Результат:

Мысал . Тік бағытта қайталау (repeat-y)

Жүректер тек тік бағытта қайталанады:

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

Результат:

Мысал . Аралықтармен қайталау (space)

Жүректер бірдей аралықтармен біркелкі таратылған:

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

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

Результат:

Мысал . Масштабталатын қайталау (round)

Жүректер біркелкі толтыру үшін масштабталады:

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

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

Результат:

Сондай-ақ қараңыз