Propriété mask
La propriété mask est un raccourci pour toutes les propriétés de masquage et permet de définir :
une image de masque, sa position, sa taille, son mode de fusion et d'autres paramètres.
Est une propriété raccourcie pour les propriétés suivantes :
mask-image,
mask-position,
mask-size,
mask-repeat,
mask-origin,
mask-clip,
mask-mode,
mask-composite.
Syntaxe
sélecteur {
mask: [mask-image] [mask-position] / [mask-size]
[mask-repeat] [mask-origin] [mask-clip]
[mask-mode] [mask-composite];
}
Valeurs
| Valeur | Description |
|---|---|
none |
Désactive le masquage (valeur par défaut) |
url() |
Chemin vers l'image de masque (SVG, PNG) |
linear-gradient() |
Dégradé linéaire comme masque |
radial-gradient() |
Dégradé radial comme masque |
position |
Position du masque (top, center, 50% 50% etc.) |
size |
Taille du masque (cover, contain, 100px 50px) |
repeat |
Répétition du masque (no-repeat, repeat-x, space) |
mode |
Mode de fusion (alpha, luminance, match-source) |
composite |
Composition des masques (add, subtract, intersect, exclude) |
Préparation des images
Supposons que nous ayons une image de nature que nous allons recadrer, et des images SVG d'un cœur et d'une flèche, que nous utiliserons pour découper :
<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">
:
Exemple . Masque image
Appliquons un masque en forme de cœur à notre image :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
background: red;
mask: url("heart.svg") center/300px no-repeat;
}
:
Exemple . Position du masque
Masque en forme de cœur dans le coin supérieur gauche :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left top/150px no-repeat;
}
:
Exemple . Position du masque
Masque en forme de cœur dans le coin inférieur droit :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") right bottom/150px no-repeat;
}
:
Exemple . Position du masque
Masque en forme de cœur au centre à gauche :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center/150px no-repeat;
}
:
Exemple . Position du masque
Masque en forme de cœur au centre :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/150px no-repeat;
}
:
Exemple . Position du masque
Masque en forme de cœur à 100px de la gauche et 200px du haut :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") 100px 200px /150px no-repeat;
}
:
Exemple . Taille du masque cover
La valeur cover redimensionne le masque pour qu'il couvre complètement l'élément, en conservant les proportions.
Peut rogner les bords du masque si les proportions ne correspondent pas :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/cover;
}
:
Exemple . Taille du masque contain
La valeur contain redimensionne le masque pour qu'il tienne entièrement dans l'élément,
en conservant les proportions. Peut laisser des zones vides :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/contain no-repeat;
}
:
Exemple . Taille du masque
Une taille fixe définit les dimensions exactes du masque.
Par exemple, créons un masque de taille 50px :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/50px no-repeat;
}
:
Exemple . Répétition no-repeat
La valeur no-repeat désactive la répétition du masque.
Le masque n'est affiché qu'une seule fois à la position spécifiée :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") top left / 150px no-repeat;
}
:
Exemple . Répétition repeat-x
La valeur repeat-x répète le masque uniquement sur l'axe horizontal :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center / 50px repeat-x;
}
:
Exemple . Composition add
La valeur add additionne plusieurs masques (le résultat est l'union de tous les masques) :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 200px 30px / 150px no-repeat;
mask-composite: add;
}
:
Exemple . Composition intersect
La valeur intersect montre uniquement la zone d'intersection des masques :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 50px 30px / 150px no-repeat;
mask-composite: intersect;
}
:
Exemple . Composition exclude
La valeur exclude montre les zones des masques qui ne se chevauchent pas :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 150px no-repeat,
url("arrow.svg") 50px 30px / 150px no-repeat;
mask-composite: exclude;
}
:
Exemple . Composition subtract
La valeur subtract soustrait le deuxième masque du premier.
Par exemple, créons un cœur et soustrayons-en
une flèche :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask:
url("heart.svg") 100px 50px / 250px no-repeat,
url("arrow.svg") 170px 80px / 120px no-repeat;
mask-composite: subtract;
}
:
Exemple . Notation étendue de mask
La propriété mask, écrite avec ses composantes individuelles :
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-origin: content-box;
mask-clip: content-box;
mask-mode: alpha;
mask-composite: add;
}
:
Exemple . SVG pour image
Utilisation d'un élément SVG comme masque pour une image :
<img id="image" src="image.jpg">
<svg width="0" height="0">
<mask id="mask">
<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
</mask>
</svg>
#image {
width: 500px;
height: 281px;
background: red;
mask: url(#mask);
}
:
Exemple . SVG pour dégradé
Utilisation d'un élément SVG comme masque pour un dégradé :
<div id="elem"></div>
<svg width="0" height="0">
<mask id="star-mask">
<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
</mask>
</svg>
#elem {
width: 500px;
height: 300px;
background: linear-gradient(45deg, red, blue);
mask: url(#star-mask);
}
:
Voir aussi
-
propriété
mask-position,
définit la position du masque par rapport à l'élément -
propriété
mask-image,
définit l'image du masque -
propriété
mask-mode,
définit comment le masque interagit avec l'arrière-plan -
propriété
mask-size,
définit la taille du masque -
propriété
mask-repeat,
définit la répétition du masque -
propriété
mask-origin,
définit la zone de positionnement du masque -
propriété
mask-clip,
définit la zone de découpe du masque -
propriété
mask-composite,
définit comment plusieurs masques se combinent
