oujood.com

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

La propriété CSS mask-type décrivant sa définition, utilisation, syntaxe générale, les valeurs possibles, des exemples et des conseils d'utilisation

chercher |

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

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssionnon supportéenon supportée35 715

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>




Voir aussi nos tutoriel :

fonction echo, echo

Affiche une chaîne de caractères

PHP Les boucles for foreach

PHP Les boucles for foreach

fonction crc32, crc32

Calcule la somme de contrôle CRC32