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
selettore {
mask-position: <position>;
}
Valori
| Valore | Descrizione |
|---|---|
top left |
In alto a sinistra (predefinito). |
center |
Al centro dell'elemento. |
50% 50% |
Analogo a center. |
right bottom |
In basso a destra. |
100px 200px |
Coordinate specifiche in pixel. |
Esempio . Centratura della maschera
Maschera a forma di cuore al centro dell'immagine:
<img id="image" src="image.jpg">
#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:
<img id="image" src="image.jpg">
#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:
<img id="image" src="image.jpg">
#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:
<img id="image" src="image.jpg">
#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:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Vedi anche
-
proprietà
mask-size,
definisce le dimensioni della maschera -
proprietà
mask-origin,
definisce il punto di riferimento per il posizionamento -
proprietà
mask,
scorciatoia per tutte le proprietà di mascheratura
