Savybė mask-position

Savybė mask-position nustato pradinę kaukos padėtį elemento atžvilgiu. Veikia panašiai kaip background-position, bet taikoma kaukoms.

Sintaksė

cssselektorius {
  mask-position: <position>;
}

Reikšmės

Reikšmė	Aprašas
`top left`	Kairiajame viršutiniame kampe (pagal nutylėjimą).
`center`	Elemento centre.
`50% 50%`	Analogiska center.
`right bottom`	Dešiniajame apatiniame kampe.
`100px 200px`	Konkrečios koordinatės pikseliais.

Pavyzdys . Kaukos centravimas

Širdelės formos kaukos centravimas vaizde:

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

Результат:

Pavyzdys . Kairysis viršutinis kampas

Kaukos kairiajame viršutiniame kampe:

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

Результат:

Pavyzdys . Dešinysis apatinis kampas

Kaukos dešiniajame apatiniame kampe:

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

Результат:

Pavyzdys . Tikslios koordinatės

Kaukos pozicionavimas pagal tikslias koordinates:

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

Результат:

Pavyzdys . Procentinis pozicionavimas

Kaukos pozicionavimas naudojant procentus:

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

Результат:

Taip pat žiūrėkite

savybė mask-size,
nustato kaukos dydį
savybė mask-origin,
nustato atskaitos tašką pozicionavimui
savybė mask,
sutrumpinimas visoms maskavimo savybėms