Masquage CSS - La propriété mask-image

Table des matières

    Afficher la table des matières

Avec le masquage CSS, vous créez un calque de masque à placer sur un élément pour masquer partiellement ou entièrement des parties de l’élément.

La propriété CSS mask-image

La propriété CSS mask-image spécifie un masque couche image.

L'image du calque de masque peut être une image PNG, une image SVG, un dégradé CSS ou un Élément SVG .

Prise en charge du navigateur

Remarque : La plupart des navigateurs ne prennent en charge que partiellement CSS. masquage. Vous devrez utiliser le préfixe -webkit- en plus du préfixe standard propriété dans la plupart des navigateurs.

Les numéros dans le tableau ci-dessous spécifient la première version du navigateur qui prend entièrement en charge la propriété. Les nombres suivis de -webkit- spécifient la première version qui fonctionnait avec un préfixe.

Property
mask-image 4.0 -webkit- 79.0 -webkit- 53.0 4.0 -webkit- 15.0 -webkit-

Utiliser une image comme calque de masque

Pour utiliser une image PNG ou SVG comme calque de masque, utilisez une valeur url() pour transmettre le masque image de calque.

L'image du masque doit avoir une zone transparente ou semi-transparente. Noir indique entièrement transparent.

Voici l’image du masque (une image PNG) que nous utiliserons :

W3Schools.com

Voici une image des Cinque Terre, en Italie :

Cinque Terre

Maintenant, nous appliquons l'image du masque (l'image PNG ci-dessus) comme calque de masque pour l'image des Cinque Terre, en Italie :

Cinque Terre

Exemple

Voici le code source :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;    
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Exemple expliqué

La propriété mask-image spécifie l'image à utiliser comme calque de masque pour un élément.

La propriété mask-repeat spécifie si ou comment une image de masque sera répétée. Le pas de répétition La valeur indique que l'image du masque ne sera pas répétée (l'image du masque sera ne sera affiché qu’une seule fois).

Un autre exemple

Si nous omettons la propriété mask-repeat, l'image du masque sera répétée sur toute l'image des Cinque Terre, en Italie :

Cinque Terre

Exemple

Voici le code source :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Utiliser des dégradés comme calque de masque

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

Exemples de dégradés linéaires

Ici, nous utilisons un dégradé linéaire comme calque de masque pour notre image. Ce dégradé linéaire va du haut (noir) vers le bas (transparent) :

Cinque Terre
 

Exemple

Utilisez un dégradé linéaire comme calque de masque :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Ici, nous utilisons un dégradé linéaire avec un masquage de texte comme calque de masque pour notre image :

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.

Exemple

Utilisez un dégradé linéaire avec un masquage de texte comme calque de masque :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 20px;
  padding: 20px;
  color: white;
}
.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(img_5terre.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A linear gradient as a mask layer:</h3>

<div class="mask1">
<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>

<p>The Cinque Terre is a coastal area within Liguria, in the northwest of Italy. It lies in the west of La Spezia Province, and comprises five villages: Monterosso al Mare, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
</div>

</body>
</html>

Exemples de dégradés radiaux

Ici, nous utilisons un dégradé radial (en forme de cercle) comme calque de masque pour notre image :

Cinque Terre

Exemple

Utilisez un dégradé radial comme calque de masque (un 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%);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.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%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (a circle):</h3>
<div class="mask2">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Ici, nous utilisons un dégradé radial (en forme d'ellipse) comme calque de masque pour notre image :

Cinque Terre

Exemple

Utilisez un autre dégradé radial comme calque de masque (une 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%);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.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%);
}
</style>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>A radial gradient as a mask layer (an ellipse):</h3>
<div class="mask3">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Utiliser SVG comme calque de masque

L'élément SVG <mask> peut être utilisé à l'intérieur d'un Graphique SVG pour créer des effets de masquage.

Ici, nous utilisons l'élément SVG <mask> pour créer différents calques de masque pour notre image :

Sorry, your browser does not support inline SVG.

Exemple

Un calque de masque SVG (formé sous 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="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a triangle):</h3>
<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="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline SVG.

Exemple

Un calque de masque SVG (formé en é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="img_5terre.jpg" mask="url(#svgmask2)"></image>
    </svg>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as a star):</h3>
<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="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>
Sorry, your browser does not support inline SVG.

Exemple

Un calque de masque SVG (formé sous forme de cercles) :

   <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="img_5terre.jpg" 
    mask="url(#svgmask3)"></image>
</svg>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>The mask-image Property</h1>

<h3>An SVG mask layer (formed as circles):</h3>
<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="img_5terre.jpg" mask="url(#svgmask3)"></image>
</svg>

<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">

</body>
</html>

Propriétés de masquage CSS

Le tableau suivant répertorie toutes les propriétés de masquage CSS :

mask-image

Spécifie une image à utiliser comme calque de masque pour un élément

mask-mode

Spécifie si l'image du calque de masque est traitée comme un masque de luminance ou comme masque alpha

mask-origin

Spécifie la position d'origine (la zone de position du masque) d'un calque de masque image

mask-position

Définit la position de départ d'une image de calque de masque (par rapport au masque zone de positionnement)

mask-repeat

Spécifie comment l'image du calque de masque est répétée

mask-size

Spécifie la taille d'une image de calque de masque