mask-type
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
La propriété mask-type définit si un masque sera utilisé comme un masque de luminance ou comme un masque de transparence (aussi appelé masque alpha). Cette propriété s'applique sur l'élément SVG <mask>. Le comportement de cette propriété peut être surchargée par la propriété mask-mode qui définit sur quel élément le masque est appliqué. De façon générale, les masques alpha sont appliqués plus rapidement que les masques de luminance.
/* Valeurs avec un mot-clé */
mask-type: luminance;
mask-type: alpha;
/* Valeurs globales */
mask-type: inherit;
mask-type: initial;
mask-type: unset;
Syntaxe
La propriété mask-type est définie avec un mot-clé parmi ceux définis ci-après.
Valeurs
luminance-
Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de luminance. Autrement dit, ce sont les valeurs de luminance relatives qui seront utilisées lorsque le masque sera appliqué.
alpha-
Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de transparence. Autrement dit, ce sont les valeurs du canal alpha de l'image qui seront utilisées lorsque le masque sera appliqué.
Définition formelle
| Valeur initiale | luminance |
|---|---|
| Applicabilité | les éléments <mask> |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
mask-type =
luminance |
alpha
Exemples
Définir un masque alpha
HTML
<div class="redsquare"></div>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="0"
height="0">
<defs>
<mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
<rect
x=".1"
y=".1"
width=".8"
height=".8"
fill="red"
fill-opacity="0.7" />
</mask>
</defs>
</svg>
CSS
.redsquare {
height: 100px;
width: 100px;
background-color: rgb(128, 128, 128);
border: solid 1px black;
mask: url("#m");
}
Résultat
Définir un masque de luminance
HTML
<div class="redsquare"></div>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="0"
height="0">
<defs>
<mask
id="m"
maskContentUnits="objectBoundingBox"
style="mask-type:luminance">
<rect
x=".1"
y=".1"
width=".8"
height=".8"
fill="red"
fill-opacity="0.7" />
</mask>
</defs>
</svg>
CSS
.redsquare {
height: 100px;
width: 100px;
background-color: rgb(128, 128, 128);
border: solid 1px black;
mask: url("#m");
}
Résultat
Spécifications
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-type |
Compatibilité des navigateurs
Chargement…