Sifa mask-position

Sifa mask-position inaweka nafasi ya awali ya kifuniko ikilinganishwa na kipengele. Inafanya kazi kama background-position, lakini inatumika kwa vifuniko.

Syntax

csskichaguli {
  mask-position: <position>;
}

Thamani

Thamani	Maelezo
`top left`	Kwenye kona ya juu kushoto (msingi).
`center`	Katikati ya kipengele.
`50% 50%`	Kama center.
`right bottom`	Kwenye kona ya chini kulia.
`100px 200px`	Viwekawima maalum kwenye saizi ya pikseli.

Mfano . Kuweka Kifuniko Katikati

Kifuniko cha pembe moyo katikati ya picha:

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

Результат:

Mfano . Kona ya Juu Kushoto

Kifuniko kwenye kona ya juu kushoto:

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

Результат:

Mfano . Kona ya Chini Kulia

Kifuniko kwenye kona ya chini kulia:

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

Результат:

Mfano . Viwekawima Maalum

Kifuniko kimewekwa kwa viwekawima maalum:

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

Результат:

Mfano . Kuweka Nafasi kwa Asilimia

Kuweka nafasi ya kifuniko kwa kutumia asilimia:

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

Результат:

Angalia Pia

sifa mask-size,
inabainisha ukubwa wa kifuniko
sifa mask-origin,
inabainisha hatua ya kuanzia kwa kuweka nafasi
sifa mask,
ufupisho kwa sifa zote za kufunika