Egenskaben mask-position

Egenskaben mask-position indstiller maskens startposition i forhold til elementet. Fungerer på samme måde som background-position, men anvendes til masker.

Syntaks

cssselektor {
  mask-position: <position>;
}

Værdier

Værdi	Beskrivelse
`top left`	I øverste venstre hjørne (som standard).
`center`	I midten af elementet.
`50% 50%`	Samme som center.
`right bottom`	I nederste højre hjørne.
`100px 200px`	Specifikke koordinater i pixels.

Eksempel . Centrering af maske

Hjertemaske centreret på billedet:

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

Результат:

Eksempel . Øverste venstre hjørne

Maske i øverste venstre hjørne:

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

Результат:

Eksempel . Nederste højre hjørne

Maske i nederste højre hjørne:

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

Результат:

Eksempel . Præcise koordinater

Maske positioneret ved præcise koordinater:

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

Результат:

Eksempel . Procentvis positionering

Positionering af maske ved hjælp af procenter:

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

Результат:

Se også

egenskaben mask-size,
definerer maskens størrelse
egenskaben mask-origin,
definerer referencepunktet for positionering
egenskaben mask,
genvej for alle maskingsegenskaber