Propriété css mask-type

OUJOOD.COM

Propriété CSS mask-type : Définition

La propriété CSS mask-type permet de déterminer le type de masque à utiliser pour masquer ou dissimuler une partie d'un élément.

Utilisation

Pour utiliser la propriété mask-type, il faut l'appliquer à un élément en utilisant la syntaxe suivante :

selector { mask-type: value; }

Syntaxe générale

La syntaxe générale de la propriété mask-type est la suivante :

      mask-type: none | alpha | luminance;

Valeurs possibles

none - Le masque est désactivé.
alpha - Le masque utilise les valeurs alpha de l'image de masque pour déterminer l'opacité de l'élément.
luminance - Le masque utilise les valeurs de luminance de l'image de masque pour déterminer l'opacité de l'élément.

Exemples

Voici un exemple d'utilisation de la propriété mask-type pour masquer une partie de l'image :

Exemple : 📋 Copier le code

      .masked-image {
        mask-image: url(masque.png);
        mask-type: alpha;
      }

Conseils et astuces d'utilisation

Assurez-vous de définir une image de masque en utilisant la propriété mask-image.
Si vous utilisez un masque de type alpha, assurez-vous que l'image de masque contient des informations sur la transparence (alpha channel).
Si vous utilisez un masque de type luminance, assurez-vous que l'image de masque contient des informations sur la luminance.

CSS Syntaxe CSS

Valeurs par défaut	none
Inherited:	non
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.maskType="alpha"

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	non supportée	non supportée	35	7	15

Exemple : 📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>CSS la propriété mask-type </title>
<style>
img {
  display: block;
  width: 100%;
  max-width: 300px;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

#mask {
  mask-type: alpha;
  -webkit-mask-type: alpha;
}

body {
  margin: 0;
  min-height: 100vh;
}
</style>
</head>
<body>

<h1>La propriété css mask-type </h1>
<div><p>Mets-moi un beau masque !</p><br>
<svg>
  <mask id="mask">
  <polygon fill="black" points="150,0 174.3,74.8 253,74.8 189.4,121 213.7,195.8 150,149.6 86.4,195.8 110.7,121 47.1,74.8 125.7,74.8"/>
  </mask>
</svg>

<img src="https://source.unsplash.com/SttBW1mTo5w/900x588" alt="une image" />
</div>
<p>Voici l'image svg utilisée comme masque </p>
<svg>
  <polygon fill="black" points="150,0 174.3,74.8 253,74.8 189.4,121 213.7,195.8 150,149.6 86.4,195.8 110.7,121 47.1,74.8 125.7,74.8"/>
</svg>
</body>
</html>

Liste des propriétés css

La propriété mask-type : définition, syntaxe et utilisation

OUJOOD.COM