Eienskap mask-position

Die eienskap mask-position stel die aanvanklike posisie van die masker relatief tot die element. Dit werk soortgelyk aan background-position, maar word op maskers toegepas.

Sintaksis

cssselektor {
  mask-position: <posisie>;
}

Waardes

Waarde	Beskrywing
`top left`	In die linker boonste hoek (verstek).
`center`	In die middel van die element.
`50% 50%`	Soortgelyk aan center.
`right bottom`	In die regter onderste hoek.
`100px 200px`	Spesifieke koördinate in pixels.

Voorbeeld . Maskersentrering

Hartjiemasker in die middel van die beeld:

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

Результат:

Voorbeeld . Linker boonste hoek

Masker in die linker boonste hoek:

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

Результат:

Voorbeeld . Regter onderste hoek

Masker in die regter onderste hoek:

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

Результат:

Voorbeeld . Presiese koördinate

Masker geposisioneer volgens presiese koördinate:

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

Результат:

Voorbeeld . Persentasieposisionering

Maskerposisionering met behulp van persentasies:

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

Результат:

Sien ook

eienskap mask-size,
bepaal die grootte van die masker
eienskap mask-origin,
bepaal die verwysingspunt vir posisionering
eienskap mask,
verkorting vir alle maskeringseienskappe