Calcule la clé soundex
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.
| 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>