Propriété mask-position
La propriété mask-position définit la position initiale du masque par rapport à l'élément.
Fonctionne de manière similaire à background-position, mais s'applique aux masques.
Syntaxe
sélecteur {
mask-position: <position>;
}
Valeurs
| Valeur | Description |
|---|---|
top left |
Dans le coin supérieur gauche (par défaut). |
center |
Au centre de l'élément. |
50% 50% |
Équivalent à center. |
right bottom |
Dans le coin inférieur droit. |
100px 200px |
Coordonnées spécifiques en pixels. |
Exemple . Centrage du masque
Masque en forme de cœur centré sur l'image :
<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;
}
:
Exemple . Coin supérieur gauche
Masque dans le coin supérieur gauche :
<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;
}
:
Exemple . Coin inférieur droit
Masque dans le coin inférieur droit :
<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;
}
:
Exemple . Coordonnées exactes
Le masque est positionné avec des coordonnées exactes :
<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;
}
:
Exemple . Positionnement en pourcentage
Positionnement du masque à l'aide de pourcentages :
<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;
}
:
Voir aussi
-
propriété
mask-size,
définit la taille du masque -
propriété
mask-origin,
définit le point d'origine pour le positionnement -
propriété
mask,
raccourci pour toutes les propriétés de masquage
