Egenskapen mask-position

Egenskapen mask-position sätter maskens initiala position i förhållande till elementet. Fungerar på samma sätt som background-position, men appliceras på masker.

Syntax

cssselektor {
  mask-position: <position>;
}

Värden

Värde	Beskrivning
`top left`	I övre vänstra hörnet (som standard).
`center`	I mitten av elementet.
`50% 50%`	Liknar center.
`right bottom`	I nedre högra hörnet.
`100px 200px`	Specifika koordinater i pixlar.

Exempel . Centrering av mask

Hjärtmask centrerad på bilden:

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

Результат:

Exempel . Övre vänstra hörnet

Mask i övre vänstra hörnet:

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

Результат:

Exempel . Nedre högra hörnet

Mask i nedre högra hörnet:

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

Результат:

Exempel . Exakta koordinater

Mask positionerad med exakta 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;
}

Результат:

Exempel . Procentuell positionering

Positionering av mask med hjälp av procent:

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 även

egenskapen mask-size,
bestämmer maskens storlek
egenskapen mask-origin,
bestämmer referenspunkten för positionering
egenskapen mask,
genväg för alla maskingsegenskaper