Mask - Propriété CSS
Résumé des caractéristiques de la propriété mask
SVG : conteneurs sauf defs, éléments graphiques, use.
Description de la propriété mask.
La technique de masquage permet de cacher certaines parties d'un élément en fonction d'un masque.
Ce dernier sera le plus souvent une image, mais peut aussi être un fichier SVG, ou défini avec des fonctions de dégradé comme linear-gradient() par exemple.
En ajustant la densité du masque, il est possible de masquer totalement l'élément ou de seulement l'estomper.
Ceci est un plus par rapport à la propriété clip-path qui ne permet que les découpes franches.
mask est une propriété résumée qui définit les valeurs pour les propriétés suivantes :
mask-image: Désigne l'image ou le fichier SVG qui sera utilisé comme masque.mask-position: Définit la position du masque.mask-size: Fixe les dimensions du masque.mask-repeat: Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.mask-origin: Définit la référence pour le positionnement du masque.mask-clip: Définit la zone concernée par le masquage.mask-composite: Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.mask-mode: Définit le mode de masquage (couche alpha, luminance...)
Valeurs pour mask.
mask étant une propriété résumée, elle regroupe toutes les valeurs des propriétés individuelles.
Reportez-vous à la page de chacune de ces propriétés pour une description précise de leur syntaxe.
Les exemples ci-dessous sont également un bon moyen de découvrir les syntaxes les plus courantes.
- mask: none;
Il n'y a pas de masquage de l'élément. Si un masquage était prévu, il est supprimé.
- mask: <image> <position> / <size> <repeat> <origin> <clip> <composite> <mode>;
La propriété résumée reprend les valeurs de toutes les propriétés détaillées, dans l'ordre énuméré ci-dessus. Il y a une certaines tolérance dans cet ordre dans la mesure où il s'agit de mots réservés tous différents. par contre le
/est obligatoire si vous voulez préciser la taille du maques.
Les valeurs ignorées sont remises à leur valeur initiale. - mask: initial; mask: inherit; mask: revert; mask: revertLayer; mask: unset;
Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs :
initial,inherit,revert,revert-layer,unset.
Exemples.
Sur tous les exemples, les propriétés mask et -webkit-mask ont été utilisées pour améliorer la compatibilité.
Exemple 1.
L'élément d'origine : une image
Le masque
un fichier png
Le résultat
Exemple 2.
L'élément d'origine : un texte
Le résultat
Exemple 3.
L'élément d'origine
une image
Le masque
un fichier SVG
Le résultat
Exemple 4 - Du texte hachuré.
Lorsque l'élément masqué a un arrière-plan (couleur ou image), celui-ci est également hachuré. Certains navigateurs comme Chrome, proposent
la valeur non standard text pour mask-clip. Cette valeur n'applique le masque que sur le texte.
L'arrière-plan du coup n'est plus affiché, mais c'est quelquefois le résultat cherché.
L'élément d'origine : un texte
Le masque (hachures)
un fichier png
Le résultat
Masques multiples.
Il est tout à fait possible d'appliquer plusieurs masques à un même élément. En effet, les propriétés relatives aux masques acceptent une valeur unique (un seul masque) ou une série de valeurs séparées par des virgules. L'exemple de syntaxe ci-dessous applique deux masques.
mask-image:url('chemin/fichier1.png'), url('chemin/fichier2.png);
La propriété mask-composite est particulièrement importante dans le cas de masques multiples : elle définit comment les masques doivent
interagir entre eux.
Est-ce que leurs effets s'ajoutent ? Est-ce que, au contraire, les effets doivent être soustraits, etc.
Tout ceci est défini par mask-composite.
Prise en charge de mask par les navigateurs.
La prise en charge de la propriété mask et de ses dérivées est maintenant correcte sur la plupart des navigateurs.
Pour plus de précisions sur les fonctionnalités prises en charge et celles qui ne le sont pas, reportez-vous aux propriétés individuelles
(mask-mode, mask-repeat, etc.).
Remarques :
(1) Nécessite le préfixe -webkit-. Supporte les propriétés mask-image et mask-box-image mais pas les autres propriétés relatives aux masques.
maskNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Samsung Internet
Safari
Safari sur IOS
Chrome
Opéra
Edge
Chrome pour Androïd
Firefox pour Androïd
Firefox
Androïd Brower
KaiOS Browser
Opéra mini
Historique de la propriété mask
-
Module CSS - Masquage - Niveau 1
Introduction des techniques de masquage par image. Et première définition de la propriété résuméemask.
15 Novembre 2012Document de travail.
26 Août 2014Candidat à la recommandation.
Voir aussi, au sujet des techniques de masquage.
La spécification qui standardise tout ce qui concerne le masquage s'appelle CSS Masking Module (Module CSS - Masquage).
La propriété mask et les propriétés ci-dessous sont présentées dans ce module :