Ominaisuus mask-position

Ominaisuus mask-position asettaa maskin aloitusposition suhteessa elementtiin. Toimii samalla tavalla kuin background-position, mutta sovelletaan maskeihin.

Syntaksi

cssvalitsija {
  mask-position: <position>;
}

Arvot

Arvo	Kuvaus
`top left`	Vasemmassa yläkulmassa (oletusarvoisesti).
`center`	Elementin keskellä.
`50% 50%`	Sama kuin center.
`right bottom`	Oikeassa alakulmassa.
`100px 200px`	Tarkat koordinaatit pikseleinä.

Esimerkki . Maskin keskittäminen

Sydänmaski kuvan keskellä:

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

Результат:

Esimerkki . Vasen yläkulma

Maski vasemmassa yläkulmassa:

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

Результат:

Esimerkki . Oikea alakulma

Maski oikeassa alakulmassa:

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

Результат:

Esimerkki . Tarkat koordinaatit

Maski sijoitetaan tarkkojen koordinaattien mukaan:

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

Результат:

Esimerkki . Prosentuaalinen sijoittelu

Maskin sijoittelu prosentteja käyttäen:

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

Результат:

Katso myös

ominaisuus mask-size,
määrittää maskin koon
ominaisuus mask-origin,
määrittää vertailupisteen sijoittelulle
ominaisuus mask,
lyhenne kaikille maskausominaisuuksille