logo oujood
🔍

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

OUJOOD.COM

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éfautborder-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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion4 -webkit-79 -webkit-534 -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 -