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.

css Copy code

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>

Liste des propriétés css

La propriété CSS mask-origin : Syntaxe, valeurs et utilisation

Les propriétés CSS par ordre alphabétique