OUJOOD.COM
Propriété CSS mask-image : définition
La propriété css mask-image est utilisée pour masquer une partie d'un élément en spécifiant une image comme masque. Le masque définit la zone visible de l'élément en fonction de la transparence des pixels de l'image masque.
Syntaxe générale
selector {
mask-image: url(image-url);
}
Où selector est le sélecteur cible pour l'élément à masquer et image-url est l'URL de l'image masque à utiliser.
Valeurs possibles
- url(image-url): Spécifie l'URL de l'image masque à utiliser.
- none: Désactive le masque.
- initial: Réinitialise la valeur de l'élément à sa valeur par défaut.
- inherit: Hérite de la valeur de l'élément parent.
Exemples
Voici un exemple simple d'utilisation de la propriété mask-image :
Exemple : 📋 Copier le code
img {
mask-image: url(mask.png);
}
Dans cet exemple, l'image sera masquée en utilisant le fichier mask.png comme image masque.
Conseils et astuces d'utilisation
- 1- Assurez-vous que l'image masque soit en noir et blanc pour déterminer la transparence de l'élément masqué.
- 2- Utilisez la propriété mask-size pour définir la taille de l'image masque.
- 3- Utilisez la propriété mask-repeat pour définir comment répéter l'image masque en cas d'espace insuffisant.
| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.maskImage="url(star.svg)" |
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.0 -webkit- | 79.0 -webkit- | 53 | 4.0 -webkit- | 15.0 -webkit- |