--- title: '-webkit-mask-image' slug: conflicting/Web/CSS/mask-image tags: - CSS translation_of: Web/CSS/mask-image translation_of_original: Web/CSS/-webkit-mask-image original_slug: Web/CSS/-webkit-mask-image ---

{{ CSSRef() }}

{{ Non-standard_header() }}

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>
{{cssxref("<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

{{ CompatibilityTable() }}

Fonctionnalité Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support basique {{ CompatNo() }} 1.0 {{ CompatNo() }} {{ CompatNo() }} 4.0
Images de masque multiples {{ CompatNo() }} 1.0 {{ CompatNo() }} {{ CompatNo() }} 4.0
Dégradés {{ CompatNo() }} 1.0{{ property_prefix("-webkit") }} {{ CompatNo() }} {{ CompatNo() }} 4.0{{ property_prefix("-webkit") }}
Masques SVG {{ CompatNo() }} 8.0 {{ CompatNo() }} {{ CompatNo() }} 4.0
Fonctionnalité iOS Safari Opera Mini Opera Mobile Android Browser
Support basique 3.2 {{ CompatNo() }} {{ CompatNo() }} 2.1
Images de masque multiples yes {{ CompatNo() }} {{ CompatNo() }} yes
Dégradés yes {{ property_prefix("-webkit") }} {{ CompatNo() }} {{ CompatNo() }} yes{{ property_prefix("-webkit") }}

Masques SVG

yes

{{ CompatNo() }}

{{ CompatNo() }}

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

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}