mask-image - Propriété CSS
Résumé des caractéristiques de la propriété mask-image
SVG : containers.
none
none
mask-image
passe d'une valeur à l'autre sans transition.Description de la propriété mask-image
.
mask-image
sont nouvelles et encore partiellement prises en charge par les
navigateurs. Vérifiez leur degré de compatibilité avant de les utiliser, et doublez les syntaxes avec -webkit-
mask-image
.
Le masquage est une technique (relativement récente) qui consiste à cacher certaines parties d'un élément en fonction d'un autre élément, qui est le plus souvent une image.
La propriété mask-image
définit le ou les masques à utiliser pour masquer l'élément.
Le masque peut être une image, un dégradé ou un fichier SVG.
Reportez-vous à la propriété raccourcie mask
pour plus de précisions sur la technique de masquage.
Valeurs pour mask-image
.
url
est le chemin vers un fichier image.
gradient
est un dégradé de couleurs obtenu avec l'une des fonctions CSS de dégradé.
Plusieurs masques peuvent être définis en répétant les syntaxes séparées par une virgule.
mask-image:
;
- mask-image: none;
Aucun masque n'est appliqué à l'élément : ce dernier est donc visible en entier.
- mask-image: url('chemin/fichier'); mask-image: image('chemin/fichier');
Ces deux fonctions définissent le chemin d'accès et le nom de fichier du masque. Ce dernier peut être une image ou un fichier SVG.
Reportez-vous éventuellement à la description des fonctions
url()
etimage()
. - mask-image: linear-gradient(...); mask-image: radial-gradient(...); mask-image: conic-gradient(...);
Dans ces syntaxes, le masque est spécifié par un dégradé de couleurs, défini par l'une des fonctions de dégradé.
Pour davantage de précision sur la syntaxe des fonctions de dégradé, reportez-vous à la description de ces fonctions :
linear-gradient()
,radial-gradient()
etconic-gradient()
. - mask-image: url(...), url(...);
Combinaison de plusieurs masques. Les différents masques sont séparés par des virgules. Toutes les syntaxes valides pour un masque unique (image, dégradé, fichier SVG) peuvent être utilisées dans cette syntaxe à plusieurs masques.
Pour davantage de précisions et des exemples, reportez-vous à la page sur les masques multiples.
- mask-image:
initial
; mask-image:inherit
; mask-image:revert
; mask-image:revert-layer
; mask-image:unset
;La valeur initiale est :
.none
Animation de la propriété mask-image
.
L'animation de mask-image
peut donner des effets sympathiques, surtout sur Chrome ou Edge, qui appliquent en effet de fondu lors du passage
d'un masque à l'autre.
Prise en charge par les navigateurs (compatibilité).
Les techniques de masquage et la propriété sont maintenant bien prises en charge par les navigateurs actuels.
mask-image
mask-image
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que mask-image
.
Les spécifications CSS éditées par le W3C sont organisées en modules. mask-image
fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.