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

csssélecteur {
  mask-position: <position>;
}

Valeurs

Exemple . Centrage du masque

Masque en forme de cœur centré sur l'image :

html<img id="image" src="image.jpg">

css#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 :

html<img id="image" src="image.jpg">

css#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 :

html<img id="image" src="image.jpg">

css#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 :

html<img id="image" src="image.jpg">

css#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 :

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: 30% 70%;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Voir aussi