-webkit-mask-image

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 !

Ordinateur
Mobile

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.

Voir également

-webkit-mask, -webkit-mask-origin, -webkit-mask-attachment,-webkit-mask-image,-webkit-mask-composite,-webkit-mask-repeat