Revision 1027132 of mask-mode

<div>{{CSSRef}}{{SeeCompatTable}}</div>

<h2 id="Summary">Summary</h2>

<p>The <strong><code>mask-mode</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property indicates whether the mask reference defined by {{cssxref("mask-image")}} is treated as a luminance or alpha mask.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">
/* Keyword values */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/* Multiple values */
mask-mode: alpha, match-source;

/* Global values */
mask-mode: inherit;
mask-mode: initial;
mask-mode: unset;
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>alpha</code></dt>
 <dd>This keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.</dd>
 <dt><code>luminance</code></dt>
 <dd>This keyword indicates that the luminance values of the mask layer image should be used as the mask values.</dd>
 <dt><code>match-source</code></dt>
 <dd>
 <p>If the {{cssxref("mask-image")}} property is of type &lt;mask-source&gt;, the luminance values of the mask layer image should be used as the mask values.</p>

 <p>If it is of type &lt;image&gt;, the alpha values of the mask layer image should be used as the mask values.</p>
 </dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Example">Example</h2>

<h3 id="CSS_Content">CSS Content</h3>

<pre class="brush: css; highlight[6]">
#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
  mask-size: 100% 100%;
  mask-mode: alpha; /* Can be changed in the live sample */
}
</pre>

<div class="hidden">
<h3 id="HTML_Content">HTML Content</h3>

<pre class="brush: html">
&lt;div id="masked"&gt;
&lt;/div&gt;
&lt;select id="maskMode"&gt;
  &lt;option value="alpha"&gt;alpha&lt;/option&gt;
  &lt;option value="luminance"&gt;luminance&lt;/option&gt;
  &lt;option value="match-source"&gt;match-source&lt;/option&gt;
&lt;/select&gt;
</pre>

<h3 id="JavaScript_Content">JavaScript Content</h3>

<pre class="brush: js">
var maskMode = document.getElementById("maskMode");
maskMode.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskMode = evt.target.value;
});
</pre>
</div>

<p>{{EmbedLiveSample("Example", "100px", "130px")}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}</td>
   <td>{{Spec2("CSS Masks")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("47.0")}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE&nbsp;Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("47.0")}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Gecko currently only supports the value <code>alpha</code>. Support for <code>luminance</code> and <code>match-source</code> will be implemented in {{bug("1228354")}}.</p>