1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: mask-mode
slug: Web/CSS/mask-mode
tags:
- CSS
- Experimental
- Propriété
- Reference
translation_of: Web/CSS/mask-mode
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<p>La propriété <strong><code>mask-mode</code></strong> détermine si le masque défini par {{cssxref("mask-image")}} est considéré comme un masque de luminance ou un masque alpha (transparence).</p>
<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;
/* Gestion de plusieurs masques */
mask-mode: alpha, match-source;
/* Valeurs globales */
mask-mode: inherit;
mask-mode: initial;
mask-mode: unset;
</pre>
<h2 id="Syntaxe">Syntaxe</h2>
<p>La propriété <code>mask-mode</code> est définie avec un ou plusieurs mots-clés parmi ceux de la liste suivante, séparés par des virgules.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>alpha</code></dt>
<dd>Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal de transparence) qui sont utilisées comme valeurs de masque.</dd>
<dt><code>luminance</code></dt>
<dd>Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque.</dd>
<dt><code>match-source</code></dt>
<dd>
<p>Si la propriété {{cssxref("mask-image")}} est de type <code><mask-source></code>, les valeurs de luminance de l'image doivent être utilisée comme valeurs pour le masque.</p>
<p>Si elle est de type {{cssxref("<image>")}}, ce seront les valeurs de transparence (canal alpha) qui seront utilisées.</p>
</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="Alpha">Alpha</h3>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; highlight[7]">#masked {
width: 100px;
height: 100px;
background: blue linear-gradient(red, blue);
-webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-mode: alpha;
mask-mode: alpha;
}
</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div id="masked"></div>
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Alpha", "110px", "130px")}}</p>
<h3 id="Luminance">Luminance</h3>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css; highlight[7]">#masked {
width: 100px;
height: 100px;
background-color: #8cffa0;
-webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-mode: luminance;
mask-mode: luminance;
}
</pre>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><div id="masked"></div>
</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Luminance", "110px", "130px")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}</td>
<td>{{Spec2("CSS Masks")}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.mask-mode")}}</p>
|
