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

Результат:

Мисал

Жүрөкчөлөр аралыктар менен бирдей бөлүштүрүлгөн:

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

Результат:

Ошондой эле караңыз