Appliquer des effets aux images avec la propriété d'image de masque de CSS

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.

Rachel Andrew

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

La plupart des navigateurs ne sont compatibles qu'avec une partie de la propriété de masquage CSS standard. Vous devez utiliser le préfixe -webkit- en plus de la propriété standard pour obtenir la meilleure compatibilité avec les navigateurs. Pour en savoir plus sur la compatibilité des navigateurs, consultez Puis-je utiliser des masques CSS ?

Bien que la compatibilité des navigateurs avec la propriété préfixée soit bonne, lorsque vous utilisez le masquage pour rendre le texte au-dessus d'une image visible, veillez à ce qui se passe si le masquage n'est pas disponible. Il peut être utile d'utiliser des requêtes de fonctionnalités pour détecter la compatibilité avec mask-image ou -webkit-mask-image et fournir un remplacement lisible avant d'ajouter votre version masquée.

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

Masquage 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 glitch ci-dessous. 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.

Dans cet exemple, j'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. Vous pouvez utiliser les mots clés cover et contain, ou définir une taille pour 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.

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -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. Malheureusement, Firefox est le seul navigateur compatible avec cette approche.

Tout n'est cependant pas perdu, car pour le scénario le plus courant de masquage d'une image, nous pouvons inclure l'image dans le fichier SVG.

Masquage avec un dégradé

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

Un dégradé linéaire simple utilisé comme masque peut vous assurer que la partie inférieure d'une image ne sera 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.

Utiliser 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, j'ai trouvé un joli motif en damier dans cet article. 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 des effets très intéressants en appliquant des dégradés aux images. Essayez de remixer le Glitch et de tester d'autres variations.

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.

Photo de Julio Rionaldo sur Unsplash.