Уласцівасць 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,
скарачэнне для ўсіх уласцівасцяў маскавання