La propriété mask-origin permet de définir l'origine à partir de laquelle placer le masque.

/* Valeurs avec un mot-clé */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* Valeurs multiples */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* Valeurs non-standards */
 -webkit-mask-origin: content;
 -webkit-mask-origin: padding;
 -webkit-mask-origin: border;

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

Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via mask-image. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes inline ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles box-decoration-break agira pour déterminer la zone de positionnement du masque.

Syntaxe

Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.

Valeurs

content-box
La position de la zone est relative à la boîte de contenu.
padding-box
La position de la zone est relative à la boîte de remplissage (padding). Pour les boîtes simples, 0 0 désigne le coin en haut à gauche de la bordure de cette boîte et 100% 100% le coin en bas à droite.
border-box
La position de la zone est relative à la boîte de bordure.
margin-box
La position de la zone est relative à la boîte de marge.
fill-box
La position de la zone est relative à la boîte liée à l'objet (bounding box).
stroke-box
La position de la zone est relative à la boîte de contour de l'objet (stroke bounding box).
view-box
La zone d'affichage (viewport) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut viewBox est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par viewBox. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de viewBox.
content
Synonyme de content-box.
padding
Synonyme de padding-box.
border
Synonyme de border-box.

Syntaxe formelle

<geometry-box>#


<geometry-box> = <shape-box> | fill-box | stroke-box | view-box


<shape-box> = <box> | margin-box


<box> = border-box | padding-box | content-box

Exemples

CSS

#masked {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); 
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  -webkit-mask-origin: border-box; /* À modifier dans le résultat. */ 
  mask-origin: border-box; /* À modifier dans le résultat. */
}

HTML

<div id="masked">
</div>
<select id="origin">
  <option value="content-box">content-box</option>
  <option value="padding-box">padding-box</option>
  <option value="border-box" selected>border-box</option>
  <option value="margin-box">margin-box</option>
  <option value="fill-box">fill-box</option>
  <option value="stroke-box">stroke-box</option>
  <option value="view-box">view-box</option>
</select>

JavaScript

var origin = document.getElementById("origin");
origin.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskOrigin = evt.target.value;
});

Résultat

Spécifications

Spécification État Commentaires
CSS Masking Module Level 1
La définition de 'mask-origin' dans cette spécification.
Candidat au statut de recommandation Définition initiale.
Valeur initialeborder-box
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
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
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-origin
Expérimentale
Chrome Support complet 1
Préfixée Notes
Support complet 1
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes The margin-box value is unsupported.
Edge Aucun support NonFirefox 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 Notes
Support complet 15
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes The margin-box value is unsupported.
Safari Support complet 4
Préfixée Notes
Support complet 4
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes The margin-box value is unsupported.
WebView Android Support complet 2
Préfixée Notes
Support complet 2
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes The margin-box value is unsupported.
Chrome Android Support complet 18
Préfixée Notes
Support complet 18
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes The margin-box value is unsupported.
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 Notes
Support complet 14
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes The margin-box value is unsupported.
Safari iOS Support complet 3.2
Préfixée Notes
Support complet 3.2
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes The margin-box value is unsupported.
Samsung Internet Android Support complet Oui
Préfixée Notes
Support complet Oui
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes The margin-box value is unsupported.
fill-box
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
stroke-box
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
view-box
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
Non-standard values content, padding, border
ExpérimentaleNon-standard
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 Aucun support NonFirefox Aucun support NonIE 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 4
Préfixée
Support complet 4
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 Aucun support NonOpera 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-

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.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
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.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, lp177
Dernière mise à jour par : SphinxKnight,