Īpašība mask-position

Īpašība mask-position nosaka maskas sākotnējo pozīciju attiecībā pret elementu. Darbojas līdzīgi kā background-position, bet tiek piemērota maskām.

Sintakse

cssselektors {
  mask-position: <position>;
}

Vērtības

Vērtība	Apraksts
`top left`	Augšējā kreisajā stūrī (pēc noklusējuma).
`center`	Elementa centrā.
`50% 50%`	Līdzīgi kā center.
`right bottom`	Apakšējā labajā stūrī.
`100px 200px`	Konkrētas koordinātas pikseļos.

Piemērs . Maskas centrēšana

Sirdsveida maska attēla centrā:

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

Результат:

Piemērs . Augšējais kreisais stūris

Maskas augšējā kreisajā stūrī:

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

Результат:

Piemērs . Apakšējais labais stūris

Maskas apakšējā labajā stūrī:

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

Результат:

Piemērs . Precīzas koordinātas

Maskas pozicionēšana pēc precīzām koordinātām:

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

Результат:

Piemērs . Procentuālā pozicionēšana

Maskas pozicionēšana, izmantojot procentus:

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

Результат:

Skatiet arī

īpašība mask-size,
norāda maskas izmēru
īpašība mask-origin,
norāda atskaites punktu pozicionēšanai
īpašība mask,
saīsinājums visām maskēšanas īpašībām