Comment positionner un masque sur une image avec la propriété CSS mask-position

Propriété CSS mask-position

La propriété CSS mask-position permet de positionner un masque sur une image. Le masque est une image qui masque certaines parties de l'image d'origine. Cette propriété est très utile pour créer des effets graphiques sur une image.

Syntaxe générale

La syntaxe générale de la propriété mask-position est la suivante :

mask-position: value;

La valeur peut être une combinaison de deux valeurs : la position horizontale et la position verticale. Les valeurs possibles sont :

• left
• center
• right
• top
• bottom
• un nombre en pixels, en pourcentage ou une valeur calc()

La valeur calc() est une fonction mathématique disponible en CSS qui permet de calculer des valeurs à partir d'expressions mathématiques complexes. Elle peut être utilisée pour définir des propriétés CSS telles que la taille, la position et la couleur en utilisant des opérateurs mathématiques tels que l'addition, la soustraction, la multiplication et la division.

Dans l'exemple d'utilisation de la propriété CSS mask-position avec la valeur calc(), la fonction calc() est utilisée pour calculer la position de l'image en fonction de la taille de l'image elle-même. L'expression calc(100% - 50px) calcule la valeur de 100% de la largeur de l'image moins 50 pixels, tandis que l'expression calc(100% - 100px) calcule la valeur de 100% de la hauteur de l'image moins 100 pixels.

La valeur calc() est très utile pour créer des mises en page fluides et réactives, où les dimensions des éléments doivent être ajustées en fonction de la taille de l'écran ou de la fenêtre du navigateur.

voir notre tutoriel sur les fonctions css
Voir aussi les fonctions mathématiques css

Exemples et conseils d'utilisation

Voici quelques exemples d'utilisation de la propriété mask-position :

Exemple :      Copier le code

/* Positionne le masque en haut à gauche */
mask-position: left top;
/* Positionne le masque au centre */
mask-position: center;

/* Positionne le masque en bas à droite */
mask-position: right bottom;

/* Positionne le masque à 20 pixels à droite et 30 pixels en bas */
mask-position: calc(100% - 20px) calc(100% - 30px);

Voici quelques astuces pour bien utiliser la propriété mask-position :

• Il est possible de combiner la propriété mask-position avec la propriété mask-size pour ajuster la taille du masque.
• Il est également possible d'utiliser la propriété background-position pour positionner l'image d'arrière-plan, qui peut être utilisée en combinaison avec la propriété mask-position.

Prise en charge de la propriété dans les navigateurs

Explorateur
Verssion	4.0 -webkit-	79 -webkit-	53	4.0 -webkit-	15 -webkit-

Exemples pratiques

Voici quelques exemples pratiques d'utilisation de la propriété CSS mask-position :

1 Positionner un masque en haut à gauche de l'image :

Exemple :      Copier le code

.mask {
  mask-image: url('mon_masque.png');
  mask-position: left top;
}

2- Positionner un masque en bas à droite de l'image :

Exemple :      Copier le code

.mask {
  mask-image: url('mon_masque.png');
  mask-position: right bottom;
}

3- Centrer un masque sur l'image :

Exemple :      Copier le code

.mask {
  mask-image: url('mon_masque.png');
  mask-position: center;
}

4- Positionner un masque à une position personnalisée en pourcentage :

Exemple :      Copier le code

.mask {
  mask-image: url('mon_masque.png');
  mask-position: 20% 80%;
}

5 Positionner un masque en utilisant la valeur calc() :

Exemple :      Copier le code

.mask {
  mask-image: url('mon_masque.png');
  mask-position: calc(100% - 50px) calc(100% - 100px);
}

Ces exemples montrent comment utiliser la propriété CSS mask-position pour positionner un masque sur une image en utilisant différentes valeurs. Il est important de noter que la propriété mask-position peut être combinée avec d'autres propriétés telles que mask-size et background-position pour créer des effets visuels plus complexes.