Appliquer des effets aux images avec la propriété CSS mask-image

Le masquage CSS vous permet d'utiliser une image comme couche de masque. Cela signifie que vous pouvez utiliser une image, un SVG ou un dégradé comme masque pour créer des effets intéressants sans éditeur d'images.

Lorsque vous coupez un élément à l'aide de la propriété clip-path, la zone coupée devient invisible. Si vous souhaitez rendre une partie de l'image opaque ou lui appliquer un autre effet, vous devez utiliser le masquage. Cet article explique comment utiliser la propriété mask-image en CSS, qui vous permet de spécifier une image à utiliser comme calque de masque. Vous avez alors le choix entre trois options. Vous pouvez utiliser un fichier image, un SVG ou un dégradé comme masque.

Compatibilité du navigateur

Bien que le masquage CSS soit disponible en tant que référence, la plupart des fonctionnalités de mask-image sont disponibles dans les versions antérieures du navigateur à l'aide du préfixe -webkit-mask-image. Les exemples suivants montrent comment utiliser les deux propriétés ensemble pour une compatibilité optimale avec les navigateurs.

Masquer avec une image

La propriété mask-image fonctionne de la même manière que la propriété background-image. Utilisez une valeur url() pour transmettre une image. L'image de votre masque doit comporter une zone transparente ou semi-transparente.

Une zone entièrement transparente rend la partie de l'image située en dessous invisible. Toutefois, l'utilisation d'une zone semi-transparente permet de laisser transparaître une partie de l'image d'origine. Vous pouvez voir la différence dans le CodePen suivant.

  • La première image est l'image d'origine des ballons sans masque.
  • Un masque est appliqué à la deuxième image, qui comporte une étoile blanche sur un arrière-plan entièrement transparent.
  • La troisième image comporte une étoile blanche sur un arrière-plan avec un dégradé de transparence.

Cet exemple utilise également la propriété mask-size avec une valeur de cover. Cette propriété fonctionne de la même manière que background-size. Utilisez les mots clés cover et contain, ou attribuez une taille à l'arrière-plan à l'aide d'une unité de longueur valide ou d'un pourcentage.

Vous pouvez également répéter votre masque comme vous le feriez pour une image de fond, afin d'utiliser une petite image comme motif répété.

Masquage avec SVG

Plutôt que d'utiliser un fichier image comme masque, vous pouvez utiliser un fichier SVG. Pour ce faire, plusieurs méthodes s'offrent à vous. La première consiste à inclure un élément <mask> dans le fichier SVG et à référencer l'ID de cet élément dans la propriété mask-image.

.container img {
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

L'avantage de cette approche est que le masque peut être appliqué à n'importe quel élément HTML, et pas seulement à une image.

Dans le cas le plus courant de masquage d'une image, vous pouvez plutôt inclure l'image dans le fichier SVG. La première approche est la référence Nouvellement disponible, y compris l'image dans le SVG, est compatible avec les anciens navigateurs compatibles avec la version avec préfixe -webkit.

Masque avec un dégradé

Utiliser un dégradé CSS comme masque est un moyen élégant de créer une zone masquée sans avoir à créer une image ou un SVG.

Un dégradé linéaire utilisé comme masque peut vous assurer que la partie inférieure d'une image n'est pas trop sombre sous une légende, par exemple.

Vous pouvez utiliser n'importe quel type de dégradé compatible et faire preuve de créativité. Cet exemple utilise un dégradé radial pour créer un masque circulaire qui éclaire l'arrière-plan de la légende.

Plusieurs masques

Comme pour les images de fond, vous pouvez spécifier plusieurs sources de masque, en les combinant pour obtenir l'effet souhaité. Cela est particulièrement utile si vous souhaitez utiliser un motif généré avec des dégradés CSS comme masque. Ils utilisent généralement plusieurs images de fond et peuvent donc être facilement convertis en masque.

Par exemple, un motif en damier est utilisé dans ces modèles avec des dégradés CSS. Le code, qui utilise des images de fond, se présente comme suit:

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Pour transformer ce motif ou tout autre motif conçu pour les images de fond en masque, vous devez remplacer les propriétés background-* par les propriétés mask appropriées, y compris celles avec le préfixe -webkit.

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Vous pouvez créer de très beaux effets en appliquant des dégradés aux images. Testez d'autres variantes en créant une fourchette du CodePen suivant.

En plus du recadrage, les masques CSS permettent d'ajouter de l'intérêt aux images et à d'autres éléments HTML sans avoir à utiliser une application graphique.