-webkit-mask-image

Cette traduction est incomplète. Aidez-nous à 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.

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.

Voir également

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

Sujets associés