Właściwość mask-position

Właściwość mask-position ustawia początkową pozycję maski względem elementu. Działa analogicznie do background-position, ale stosuje się do masek.

Składnia

cssselektor {
  mask-position: <position>;
}

Wartości

Wartość	Opis
`top left`	W lewym górnym rogu (domyślnie).
`center`	Na środku elementu.
`50% 50%`	Analogicznie do center.
`right bottom`	W prawym dolnym rogu.
`100px 200px`	Konkretne współrzędne w pikselach.

Przykład . Wyśrodkowanie maski

Maska w kształcie serca na środku obrazu:

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

Результат:

Przykład . Lewy górny róg

Maska w lewym górnym rogu:

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

Результат:

Przykład . Prawy dolny róg

Maska w prawym dolnym rogu:

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

Результат:

Przykład . Dokładne współrzędne

Maska pozycjonowana za pomocą dokładnych współrzędnych:

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

Результат:

Przykład . Pozycjonowanie procentowe

Pozycjonowanie maski za pomocą procentów:

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

Результат:

Zobacz też

właściwość mask-size,
określa rozmiar maski
właściwość mask-origin,
określa punkt odniesienia dla pozycjonowania
właściwość mask,
skrót dla wszystkich właściwości maskowania