mask-position

La propriété mask-position indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété mask-origin.

/* Valeurs avec un mot-clé */
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/*  Valeurs en pourcentage */
/* Type <percentage>       */
mask-position: 25% 75%;

/* Valeurs en longueur */
/* Type <length>       */
mask-position: 0px 0px;
mask-position: 1cm 2cm;
mask-position: 10ch 8em;

/* Valeurs multiples */
mask-position: 0px 0px, center;

/* Valeurs globales */
mask-position: inherit;
mask-position: initial;
mask-position: unset;

Syntaxe

Valeurs

<position>
Une position CSS (type <position>) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.

Syntaxe formelle

<position>#


<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]


<length-percentage> = <length> | <percentage>

Exemples

CSS

#wrapper {
  border: 1px solid black;
  width: 250px;
  height: 250px;
}

#masked {
  width: 250px;
  height: 250px;
  background: blue linear-gradient(red, blue);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-repeat: no-repeat;
  mask-position: top right; /* Can be changed in the live sample */
  margin-bottom: 10px;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Masking Module Level 1
La définition de 'mask-position' dans cette spécification.
Candidat au statut de recommandation Définition initiale.
Valeur initialecenter
Applicabilitétous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments defs et des éléments graphiques
Héritéenon
Pourcentagesfait référence à la taille du masque pour la zone de pointure moins la taille du masque pour la taille de l'image (voir background-position)
Médiavisuel
Valeur calculéeDeux mots-clés décrivant l'origine et deux représentant les décalages par rapport à cette origine. Chaque valeur est fournie comme une longueur absolue ou comme un pourcentage.
Type d'animationrepeatable list of simple list of length, percentage, or calc
Ordre canoniqueselon la grammaire

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
mask-position
Expérimentale
Chrome Support complet 1
Préfixée
Support complet 1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 18Firefox Support complet 53
Support complet 53
Aucun support 20 — 53
Désactivée
Désactivée From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 15
Préfixée
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 3.2
Préfixée
Support complet 3.2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 2
Préfixée
Support complet 2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 18
Préfixée
Support complet 18
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 53
Support complet 53
Aucun support 20 — 53
Désactivée
Désactivée From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 14
Préfixée
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 3.2
Préfixée
Support complet 3.2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support for three-value syntax of position
Expérimentale
Chrome Aucun support 1 — 68
Préfixée
Aucun support 1 — 68
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 18Firefox Aucun support 53 — 70
Aucun support 53 — 70
Aucun support 20 — 53
Désactivée
Désactivée From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support 15 — 55
Préfixée
Aucun support 15 — 55
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 3.2
Préfixée
Support complet 3.2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Aucun support 2 — 68
Préfixée
Aucun support 2 — 68
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Aucun support 18 — 68
Préfixée
Aucun support 18 — 68
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 53
Support complet 53
Aucun support 20 — 53
Désactivée
Désactivée From version 20 until version 53 (exclusive): this feature is behind the layout.css.masking.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support 14 — 48
Préfixée
Aucun support 14 — 48
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 3.2
Préfixée
Support complet 3.2
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.