Хосияти 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,
ихтисори ҳамаи хосиятҳои маскгузорӣ