Proprietatea mask-position

Proprietatea mask-position stabilește poziția inițială a măștii relativă la element. Funcționează similar cu background-position, dar se aplică la măști.

Sintaxă

cssselector {
  mask-position: <position>;
}

Valori

Valoare	Descriere
`top left`	În colțul din stânga sus (implicit).
`center`	În centrul elementului.
`50% 50%`	Similar cu center.
`right bottom`	În colțul din dreapta jos.
`100px 200px`	Coordonate specifice în pixeli.

Exemplu . Centrarea măștii

Mască în formă de inimă centrată pe imagine:

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

Результат:

Exemplu . Colțul stânga sus

Mască în colțul din stânga sus:

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

Результат:

Exemplu . Colțul dreapta jos

Mască în colțul din dreapta jos:

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

Результат:

Exemplu . Coordonate exacte

Masca este poziționată la coordonate exacte:

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

Результат:

Exemplu . Poziționare procentuală

Poziționarea măștii folosind procente:

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

Результат:

Vezi și

proprietatea mask-size,
determină dimensiunea măștii
proprietatea mask-origin,
determină punctul de referință pentru poziționare
proprietatea mask,
prescurtare pentru toate proprietățile de mascare