Propriété mask-position CSS

Définition et utilisation

mask-position L'attribut définit la position de départ de l'image de masque (par rapport à la zone de position de masque).

Astuce :Par défaut, l'image de masque est placée dans le coin supérieur gauche de l'élément et est répétée dans les directions verticale et horizontale.

Exemple

Exemple 1

Positionne l'image de masque au centre :

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
}

Essayez-le vous-même

Exemple 2

Positionne l'image de masque à l'angle inférieur droit :

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
}

Essayez-le vous-même

Syntaxe CSS

mask-position: value;

Valeur de l'attribut

Valeur Description
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 Si une seule clé est spécifiée, l'autre valeur sera "center".
x% y%

La première valeur est la position horizontale, la deuxième valeur est la position verticale.

Le coin supérieur gauche est 0% 0%. Le coin inférieur droit est 100% 100%.

Si une seule valeur est spécifiée, l'autre valeur sera de 50%.

La valeur par défaut est : 0% 0%
xpos ypos

La première valeur est la position horizontale, la deuxième valeur est la position verticale.

Le coin supérieur gauche est 0 0. L'unité peut être en pixels (0px 0px) ou toute autre unité CSS.

Si une seule valeur est spécifiée, l'autre valeur sera de 50%.

Il est possible de mélanger % et position.
initial Réinitialise cette propriété à sa valeur par défaut. Voir : initial.
inherit Inherits this property from its parent element. Voir : inherit.

Détails techniques

Valeur par défaut : 0% 0%
Héritabilité : Non
Création d'animation : Non pris en charge. Voir :Propriétés liées aux animations.
Version : Module de masquage CSS Niveau 1
Syntaxe JavaScript : object.style.maskPosition="100px center"

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opéra
120 120 53 15.4 106

Pages associées

Tutoriel :Couverture CSS

Référence :Propriété mask CSS

Référence :Propriété mask-clip CSS

Référence :Propriété mask-composite CSS

Référence :Propriété mask-image CSS

Référence :Propriété mask-mode CSS

Référence :Propriété mask-origin CSS

Référence :Propriété mask-repeat CSS

Référence :Propriété mask-size CSS

Référence :Propriété mask-type CSS