Proprietà mask-position

La proprietà mask-position imposta la posizione iniziale della maschera rispetto all'elemento. Funziona in modo analogo a background-position, ma applicata alle maschere.

Sintassi

cssselettore {
  mask-position: <position>;
}

Valori

Esempio . Centratura della maschera

Maschera a forma di cuore al centro dell'immagine:

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

Результат:

Esempio . Angolo in alto a sinistra

Maschera nell'angolo in alto a sinistra:

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

Результат:

Esempio . Angolo in basso a destra

Maschera nell'angolo in basso a destra:

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

Результат:

Esempio . Coordinate precise

La maschera è posizionata secondo coordinate precise:

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

Результат:

Esempio . Posizionamento percentuale

Posizionamento della maschera utilizzando le percentuali:

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

Результат:

Vedi anche