En CSS, la mask-positionpropriété spécifie la position initiale d'une image de calque de masque par rapport à la zone de position de masque. Cela fonctionne comme la background-positionpropriété.
.element ( mask-image: url("star.svg"); mask-position: 20px center; )Le masquage vous permet d'afficher des parties sélectionnées d'un élément tout en masquant le reste. Dans la démonstration suivante, vous pouvez modifier la position de l'image du calque de masque:
Syntaxe
mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )- Valeur initiale:
0% 0% - S'applique à: tous les éléments. En SVG, il s'applique aux éléments conteneurs excluant l'
élément, tous les éléments graphiques et l'élément. - Héritée: non
- Valeur calculée: composée de: deux mots clés représentant l'origine et deux décalages par rapport à cette origine, chacun étant donné en longueur absolue (si a
), sinon en pourcentage. - Type d'animation: liste répétable
Valeurs
A peut être spécifiée en termes de mots - clés de décalage ( top, left, bottom, right, et center), les pourcentages et les valeurs de longueur en ce qui concerne les bords de l'élément, similaire à la CSS background-positionpropriété.
/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center;
/* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh;
/* Percentage values */ mask-position: 25% 50%;
/* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;Définitions de valeur
: Toute longueur valide CSS ( par exemplepx,em,remet%, entre autres) qui précisera dans quelle mesure le bord de l'image de masque est du bord correspondant de l'élément.: Spécifie la position de l'image du calque de masque sous la forme d'un pourcentage par rapport à la zone de positionnement du masque moins la taille de l'image du masque.top: Équivalent à 0% pour la position verticale.right: Équivalent à 100% pour la position horizontale.bottom: Équivalent à 100% pour la position verticale.left: Équivalent à 0% pour la position horizontale.center: Équivalent à 50% pour la position horizontale si la position horizontale n'est pas spécifiée autrement, ou à 50% pour la position verticale, si c'est le cas.initial: Applique le paramètre par défaut de la propriété, qui est 0% 0%.inherit: Adopte lamask-positionvaleur du parent.unset: Supprime le courantmask-positionde l'élément.
Utiliser plusieurs valeurs
Cette propriété peut prendre une liste de valeurs séparées par des virgules pour les positions de masque et chaque valeur est appliquée à une image de calque de masque correspondante spécifiée dans la mask-imagepropriété. Dans l'exemple suivant, la première valeur spécifie la position de la première image, la deuxième valeur spécifie la position de la deuxième image, et ainsi de suite.
.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )Syntaxe différente
mask-position peut prendre une, deux, trois ou quatre valeurs pour spécifier la position du calque de masque horizontalement et verticalement.
Valeur unique
Dans le cas où une seule valeur est définie, elle est considérée comme la valeur horizontale et la valeur verticale est supposée être center.
mask-position: 100px; /* 100px center */Deux valeurs
En cas d'utilisation de valeurs de paire, la première est considérée comme la valeur horizontale et la seconde spécifie la position verticale du calque de création.
mask-position: 10% 50%; /* x=10%, Y=50% */Si les deux valeurs sont des mots-clés, l'ordre des mots-clés n'est pas pertinent:
mask-position: top left; /* = left top */Mais lorsque nous avons une combinaison de mot-clé et de longueur ou de pourcentage, l'ordre est important et la première valeur correspond toujours au décalage horizontal. Par conséquent:
mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */Trois valeurs
Si trois valeurs sont données, le décalage manquant est supposé égal à zéro:
mask-position: left 100px bottom; /* left=100px bottom=0 */Quatre valeurs
Une syntaxe à quatre valeurs vous permet de spécifier les côtés de l'élément sur lesquels vous positionnez le masque par rapport (valeurs 1 et 3), puis la distance par rapport à ces côtés (valeurs 2 et 4).
Donc, si vous souhaitez positionner le masque à 100 px du bas de l'élément et à 200 px de la droite, vous pouvez procéder comme suit:
mask-position: bottom 100px right 200px;Masques animés
Il est possible d'animer la position du masque et d' mask-sizeutiliser l'animation d'images clés et la transition CSS, comme suit:
.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; )
.element:hover ( mask-position: right 10px bottom 10px; )Dans cette prochaine démo, nous animons la position du calque de masque à l'aide d'une animation d'images clés:
Démo
Modifiez la valeur de mask-positiondans la démo suivante:
Prise en charge du navigateur
| C'EST À DIRE | Bord | Firefox | Chrome | Safari | Opéra |
|---|---|---|---|---|---|
| Non | 18 ans et plus | 53+ | 4+ | 3.2+ | 15+ |
| Chrome Android | Android Firefox | Navigateur Android | Safari sur iOS | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 2.1+ | 3.2+ | 59+ |
Plus d'information
- Module de masquage CSS niveau 1 (ébauche de l'éditeur)
- Détourage et masquage en CSS
- Découpage ou masquage: quand les utiliser
- # 185: Jouer avec les masques CSS (vidéo)