Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
Résumé
La propriété CSS -webkit-mask-image définit l'image de masque pour un élément. L'image de masque découpe la portion visible d'un élément conformément aux valeurs de transparence de cette image.
- Valeur initiale : none
- S'applique à : tous les éléments
- Héritée : non
- Média :
visuel - Valeur calculée : URI absolue ou none
Syntaxe
-webkit-mask-image: <mask-image>[, <mask-image>]*
Valeurs :
- <mask-image>
<uri>| <gradient> | none
Values
- <uri>
- Chemin de la ressource image utilisée comme masque.
- <gradient>
- Fonction-webkit-gradient utilisée comme masque.
- none
- Signifie que l'élément n'a pas de masque image.
Exemples
body {
-webkit-mask-image: url('images/mymask.png');
}
div {
-webkit-mask-image: url('images/foo.png'), url('images/bar.png');
}
p {
-webkit-mask-image: none;
}
Notes
Si plusieurs images de masque sont spécifiées, la région visible résultat sera la combinaison des régions visibles de chaque image.
Compatibilité des navigateurs
Nous convertissons les données de compatibilité dans un format JSON.
Ce tableau de compatibilité utilise encore l'ancien format
car nous n'avons pas encore converti les données qu'il contient.
Vous pouvez nous aider en contribuant !
| Fonctionnalité | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support basique | Pas de support | 1.0 | Pas de support | Pas de support | 4.0 |
| Images de masque multiples | Pas de support | 1.0 | Pas de support | Pas de support | 4.0 |
| Dégradés | Pas de support | 1.0-webkit | Pas de support | Pas de support | 4.0-webkit |
| Masques SVG | Pas de support | 8.0 | Pas de support | Pas de support | 4.0 |
| Fonctionnalité | iOS Safari | Opera Mini | Opera Mobile | Android Browser |
|---|---|---|---|---|
| Support basique | 3.2 | Pas de support | Pas de support | 2.1 |
| Images de masque multiples | yes | Pas de support | Pas de support | yes |
| Dégradés | yes -webkit | Pas de support | Pas de support | yes-webkit |
|
Masques SVG |
yes |
Pas de support |
Pas de support |
yes |
Note : Gecko supporte les effets de filtre SVG depuis sa version 1.9.1. Ils peuvent être utilisés pour masquer du contenu HTML.