CSS właściwość mask-position

Poprzednia strona mask-origin
Następna strona mask-repeat

Definicja i użycie

mask-position Atrybut ustawia początkową pozycję obrazu osłony (w stosunku do obszaru pozycji osłony).

Wskazówka:Domyślnie, obraz osłony umieszczony jest w górnym lewym rogu elementu i powtarza się w kierunku poziomym i pionowym.

Przykład

Przykład 1

Ustaw pozycję obrazu osłony na środku:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
}

Spróbuj sam!

Przykład 2

Ustaw pozycję obrazu osłony na prawym dolnym rogu:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
}

Spróbuj sam!

Gramatyka CSS

mask-position: wartość;

Wartość atrybutu

Wartość	Opis
left top left center left bottom right top right center right bottom center top center center center bottom	Jeśli określono tylko jedną nazwę kluczową, druga wartość wyniesie "center".
x% y%	Pierwsza wartość to pozycja pozioma, druga wartość to pozycja pionowa. Górny lewy róg to 0% 0%. Dolny prawy róg to 100% 100%. Jeśli określono tylko jedną wartość, druga wartość wyniesie 50%. Domyślna wartość to: 0% 0%
xpos ypos	Pierwsza wartość to pozycja pozioma, druga wartość to pozycja pionowa. Górny lewy róg to 0 0. Jednostka może być pikselami (0px 0px) lub inną jednostką CSS. Jeśli określono tylko jedną wartość, druga wartość wyniesie 50%. Można mieszać % i pozycję.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	0% 0%
Inheredność:	Nie
Tworzenie animacji:	Nieobsługiwane. Zobacz:Atrybuty związane z animacją.
Wersja:	Moduł Maskowania CSS Poziom 1
Gramatyka JavaScript:	object.style.maskPosition="100px center"