Masque-image - Astuces CSS | CSS Almanach 2025

Un masken CSS cache une partie de l'élément auquel est appliqué.

.el ( mask-image: url(star.svg); )

Supposons que vous ayez un élément avec un arrière-plan photographique et un graphique SVG en noir et blanc à utiliser comme masque, comme ceci:

Vous pouvez définir l'image comme un background-imageet le masque comme un mask-imagesur le même élément, et obtenir quelque chose comme ceci:

Les masques ont beaucoup en commun avec les arrière-plans en ce sens que vous pouvez les dimensionner, les positionner et les répéter, tout comme les arrière-plans. Voir les propriétés associées ci-dessous. Mais voici une autre chose intéressante à propos des masques qu'ils partagent avec des arrière-plans: ils peuvent être des dégradés.

Voici ce même graphique d'arrière-plan, uniquement avec un linear-gradientmasque qui le recouvre, ce qui rend le haut transparent en fondant le fond qui n'est pas du tout transparent:

Cela fonctionne parce que le sommet linear-gradientest transparent. J'aurais supposé que cela fonctionnerait si c'était whiteaussi longtemps que l' mask-typeétait luminance, mais cela ne semble pas fonctionner dans aucun navigateur pour moi.

En parlant de luminancemasques, cela ne semble pas fonctionner pour les images en tant que masques qui sont un format raster comme JPG.webp ou PNG pour moi. Mise à jour : Reader Micheal Hall écrit avec une démo où cela pourrait avoir quelque chose à voir avec l'utilisation des propriétés à long terme. Firefox semble prendre en charge ce concept si vous n'utilisez que le raccourci.

Mais les masques alpha semblent fonctionner très bien. Comme dans les graphiques raster qui utilisent la transparence alpha réelle. Comme ça:

Et juste pour prouver un point, une animation couleur que vous pouvez voir à travers le masque:

La mask-imagepropriété peut également être utilisée directement à l'intérieur des éléments SVG. Comme consultez ce masque elliptique qui a également un filtre flou:

Il semble que vous pourriez accrocher ce masque SVG et l'appliquer à d'autres éléments avec, mask-image: url(#mask);mais je ne trouve pas que cela fonctionne réellement. Cela ne fonctionne que dans SVG et a un effet secondaire désagréable d'effacer entièrement une image si elle est utilisée en dehors du SVG.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.