Mask-position касиети

mask-position касиети элементге салыштырмалуу масканын баштапкы абалын белгилейт. background-position сыяктуу эле иштейт, бирок маскаларга колдонулат.

Синтаксис

cssселектор {
  mask-position: <position>;
}

Маанилер

Маани	Сүрөттөмө
`top left`	Сол жогорку бурчта (демейки).
`center`	Элементтин борборунда.
`50% 50%`	Борбор (center) сыяктуу эле.
`right bottom`	Оң төмөнкү бурчта.
`100px 200px`	Так пикселдеги координаттар.

Мисал . Масканы борбордоо

>Сүрөттүн борборунда жүрөкчө маска:

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

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

Результат:

Мисал . Сол жогорку бурч

Сол жогорку бурчтагы маска:

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

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

Результат:

Мисал . Оң төмөнкү бурч

Оң төмөнкү бурчтагы маска:

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

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

Результат:

Мисал . Так координаттар

Маска так координаттар боюнча позицияланат:

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

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

Результат:

Мисал . Пропорциялуу позициялоо

Масканы проценттер менен позициялоо:

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

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

Результат:

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

mask-size касиети,
масканын өлчөмүн аныктайт
mask-origin касиети,
позициялоо үчүн башат чекитин аныктайт
mask касиети,
маскалоонун бардык касиеттери үчүн кыскартылган белги