Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.
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
| 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 |
Voir également
-webkit-mask, -webkit-mask-origin, -webkit-mask-attachment,-webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat