A mask-position tulajdonság

A mask-position tulajdonság a maszk kezdeti pozícióját állítja be az elemhez viszonyítva. Hasonlóan működik, mint a background-position, de a maszkokra vonatkozik.

Szintaxis

cssselector {
  mask-position: <position>;
}

Értékek

Érték	Leírás
`top left`	A bal felső sarokban (alapértelmezés).
`center`	Az elem közepén.
`50% 50%`	Ugyanaz, mint a center.
`right bottom`	A jobb alsó sarokban.
`100px 200px`	Konkrét koordináták pixelben.

Példa . Maszk középre igazítása

Szív alakú maszk a kép közepén:

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

Результат:

Példa . Bal felső sarok

Maszk a bal felső sarokban:

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

Результат:

Példa . Jobb alsó sarok

Maszk a jobb alsó sarokban:

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

Результат:

Példa . Pontos koordináták

A maszk pontos koordináták alapján pozicionálva:

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

Результат:

Példa . Százalékos pozicionálás

Maszk pozicionálása százalékos értékekkel:

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

Результат:

Lásd még

a mask-size tulajdonság,
meghatározza a maszk méretét
a mask-origin tulajdonság,
meghatározza a pozicionálás kiindulópontját
a mask tulajdonság,
rövidítés az összes maszkolási tulajdonságra