oujood.com

Masquez les éléments de votre page web avec mask-image

La propriété CSS mask-image permet de masquer une partie d'un élément en utilisant une image comme masque. Découvrez comment utiliser la propriété mask-image avec ses différentes valeurs et astuces.

chercher |

Propriété CSS mask-image : définition

La propriété css mask-image est utilisée pour masquer une partie d'un élément en spécifiant une image comme masque. Le masque définit la zone visible de l'élément en fonction de la transparence des pixels de l'image masque.

Syntaxe générale

      selector {
        mask-image: url(image-url);
      }
    

selector est le sélecteur cible pour l'élément à masquer et image-url est l'URL de l'image masque à utiliser.

Valeurs possibles

  • url(image-url): Spécifie l'URL de l'image masque à utiliser.
  • none: Désactive le masque.
  • initial: Réinitialise la valeur de l'élément à sa valeur par défaut.
  • inherit: Hérite de la valeur de l'élément parent.

Exemples

Voici un exemple simple d'utilisation de la propriété mask-image :

Exemple :       Copier le code

      img {
        mask-image: url(mask.png);
      }
    

Dans cet exemple, l'image sera masquée en utilisant le fichier mask.png comme image masque.

Conseils et astuces d'utilisation

  • 1- Assurez-vous que l'image masque soit en noir et blanc pour déterminer la transparence de l'élément masqué.
  • 2- Utilisez la propriété mask-size pour définir la taille de l'image masque.
  • 3- Utilisez la propriété mask-repeat pour définir comment répéter l'image masque en cas d'espace insuffisant.
Valeurs par défautnone
Inherited: non
Animable : non En savoir plus sur l'animable
Version: CSS3
Syntaxe JavaScript: object.style.maskImage="url(star.svg)"

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion4.0 -webkit-79.0 -webkit-53 4.0 -webkit- 15.0 -webkit-





Voir aussi nos tutoriel :

la propriété box-shadow

Attache un ou plusieurs ombres portées à la boîte

La boucle for javascript

La boucle for js : La boucle for... in peut exécuter des commandes à plusieurs reprises.

CSS border

Définit toutes les propriétés de bordure dans une déclaration