Elément XSLT XSL for each
La propriété CSS mask-origin
La propriété CSS mask-origin définit la référence du masque par rapport à l'élément masqué.
Syntaxe
Voici la syntaxe pour la propriété CSS mask-origin :
mask-origin: border-box|content-box|padding-box|margin-box|fill-box|stroke-box|view-box|initial|inherit;
Valeurs possibles
Les valeurs possibles pour la propriété CSS mask-origin sont :
- border-box : Valeur par défaut. La posistion du masque est relative à la bordure de la boîte
- content-box :La posistion du masque est relative au contenu de la boîte
- padding-box :La posistion du masque est relative au remplissage de la boîte
- margin-box : La posistion du masque est relative à la marge de boîte
- fill-box : La posistion du masque est relative au remplissage de la boîte
- stroke-box : La posistion du masque est relative au traçage la de boîte
- view-box :La posistion du masque est relative à la vue de boîte
- initial : utilise la valeur initiale par défaut
- inherit : hérite la valeur de son élément parent
Exemple
Voici un exemple d'utilisation de la propriété CSS mask-origin :
Exemple : Copier le code
.element {
mask-origin: border-box;
}
Dans cet exemple, le masque de l'élément avec la classe .element se fondera sur la boîte de bordure.
Conseils
- Assurez-vous d'utiliser la propriété CSS mask-origin conjointement avec la propriété CSS mask pour définir une image de masque ou un motif de masque.
- Il est important de bien comprendre la relation entre la référence du masque et l'élément masqué pour obtenir le rendu désiré.
- Il est recommandé d'utiliser des valeurs telles que border-box ou content-box pour une utilisation courante, tandis que les valeurs telles que fill-box et stroke-box sont plus adaptées à des utilisations spécifiques avec des images vectorielles.
Astuces d'utilisation
- Vous pouvez utiliser la propriété CSS mask-clip pour déterminer la région du masque qui sera visible ou masquée.
- Vous pouvez utiliser la propriété CSS mask-size pour définir la taille du masque en fonction de l'élément masqué.
- Vous pouvez utiliser la propriété CSS mask-position pour définir la position du masque par rapport à l'élément masqué.
| Valeurs par défaut | border-box |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.maskOrigin="padding-box"; |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 4 -webkit- | 79 -webkit- | 53 | 4 -webkit- | 15 -webkit- |
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété mask-origine </title>
<style>
.mask1 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(images/LOGOmASK.png);
mask-image: url(images/LOGOmASK.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: border-box;
mask-origin: border-box;
}
.mask2 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(images/LOGOmASK.png);
mask-image: url(images/LOGOmASK.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: content-box;
mask-origin: content-box;
}
</style>
</head>
<body>
<h1>La propriété css mask-origin </h1>
<h3>Définir mask-origin : border-box :</h3>
<div class="mask1">
<img src="images/village.png" alt="village " width="600" height="400">
</div>