mask-mode

CSS の mask-mode プロパティは、 mask-image で定義されたマスクを、明度とアルファマスクのどちらで扱うかを設定します。

/* キーワード値 */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/* 複数の値 */
mask-mode: alpha, match-source;

/* グローバル値 */
mask-mode: inherit;
mask-mode: initial;
mask-mode: unset;

構文

mask-mode プロパティは、以下に示す1つ又は複数のキーワード値を、カンマで区切って指定します。

値

alpha

このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。

luminance

このキーワードは、マスクレイヤーの明度の値をマスクの値として使用することを示します。

match-source

mask-image プロパティが <mask-source> 型であれば、マスクレイヤー画像の明度の値がマスクの値として使用されます。

<image> 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。

公式定義

形式文法

<masking-mode>#
where 
<masking-mode> = alpha | luminance | match-source

例

アルファマスクモードの使用

CSS

#masked {
  width: 227px;
  height: 200px;
  background: blue linear-gradient(red, blue);
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
  mask-mode: alpha; /* ライブサンプルで変更することができます */
}

<div id="masked">
</div>
<select id="maskMode">
  <option value="alpha">alpha</option>
  <option value="luminance">luminance</option>
  <option value="match-source">match-source</option>
</select>

var maskMode = document.getElementById("maskMode");
maskMode.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskMode = evt.target.value;
});

結果

仕様書

ブラウザーの互換性