Ombre CSS

Avec le masque CSS, vous pouvez créer une couche de masque et la placer sur un élément pour cacher partiellement ou complètement certaines parties de l'élément.

propriété mask-image

CSS mask-image l'attribut spécifie l'image de couche de masque.

L'image de couche de masque peut être une image PNG, une image SVG,Dégradé CSS ou Élément <mask> SVG.

Prise en charge du navigateur

Les numéros dans le tableau suivant indiquent la première version du navigateur prenant en charge cette propriété en totalité.

doté de -webkit- Le nombre précédé d'un préfixe indique la première version prise en charge de ce préfixe.

Utiliser une image comme couche de masque

Pour utiliser une image PNG ou SVG comme couche de masque, utilisez url() Transmettre l'image de couche de masque.

L'image de masque doit avoir une zone transparente ou semi-transparente. Le noir représente une transparence complète.

Voici l'image de masque que nous allons utiliser (image PNG) :

Voici l'image de la Cinque Terre italienne :

Maintenant, nous appliquons l'image de masque (l'image PNG au-dessus) comme couche de masque de l'image de la Cinque Terre italienne :

Exemple

Voici le code source :

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

Essayer vous-même

Exemple d'explication

mask-image L'attribut spécifie l'image utilisée comme couche de masque de l'élément.

mask-repeat L'attribut spécifie si l'image de masque doit être répétée ou comment elle doit être répétée. La valeur no-repeat signifie que l'image de masque ne sera pas répétée (l'image de masque ne sera affichée qu'une seule fois).

un autre exemple

Si nous omettons mask-repeat L'attribut, l'image de masque sera répétée sur toute l'image de Wuyancun :

Exemple

Voici le code source :

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

Essayer vous-même

Utiliser un dégradé comme couche de masque

Les dégradés linéaires et radiaux en CSS peuvent également être utilisés comme images de masque.

Exemple de dégradé linéaire

Ici, nous utilisons un dégradé linéaire comme couche de masque de l'image. Ce dégradé linéaire va du haut (noir) au bas (transparent) :

Exemple

Utiliser un dégradé linéaire comme couche de masque :

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

Essayer vous-même

Ici, nous utilisons un dégradé linéaire et un masque de texte comme couche de masque de l'image :

Exemple

Utiliser une dégradé linéaire et un masque de texte comme couche de masque :

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

Essayer vous-même

Exemple de dégradé radial

Ici, nous utilisons un dégradé radial (de forme circulaire) comme couche de masque de l'image :

Exemple

Utiliser une dégradé radial comme couche de masque (cercle) :

.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Essayer vous-même

Ici, nous utilisons un dégradé radial (en forme d'ellipse) en tant que masque pour l'image :

Exemple

Utilisation d'une autre dégradé radial en tant que masque (ellipse) :

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Essayer vous-même

Utilisation de SVG en tant que masque

L'élément <mask> SVG peut être utilisé à l'intérieur des graphiques SVG pour créer des effets de masque.

Ici, nous utilisons l'élément <mask> SVG pour créer différents masques pour les images :

Exemple

Un masque SVG en forme de triangle :

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Essayer vous-même

Exemple

Un masque SVG en forme d'étoile :

<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Essayer vous-même

Exemple

Un masque SVG circulaire :

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Essayer vous-même