mask-modeプロパティは、マスクのモードを指定する際に使用します。
マスクのモードとは、マスクレイヤーイメージの輝度値（luminance）、または、アルファ値（alpha）のいずれをマスクとして使用するのかということです。
このページ内のサンプルでは、以下の画像をマスクレイヤーとして使用します。
ハートの図形部分以外は透明にしてあります。
ハートの図形部分のピンク色は完全な不透明なのでアルファ値は 0% です。
尚、輝度とは明るさのことですが、明度とは異なります。
例えば、上記のハート図形のピンク色から単純に色味を抜いてグレースケールにすると、明度が抽出できます。
一方、輝度は光の三原色のR（赤）G（緑）B（青）のうち、人間の目で見た際に明るく感じるG（緑）やR（赤）の重みづけを大きくし、暗く感じるB（青）の重みづけを小さくしたうえで算出されます。
そのため、黄系と青系の2色が同じ明度であったとしても、黄系（R+G）の色は輝度が高く、青系（B）の色は輝度が低くなります。
■値
- luminance
- マスクレイヤーイメージの輝度値をマスクとして使用
- alpha
- マスクレイヤーイメージのアルファ値をマスクとして使用
- auto
-
マスクレイヤーイメージが、URLで指定する画像やSVG形式などのソースの場合には luminance 、
グラデーションなどのイメージ値の場合には alpha となる（初期値）
■初期値・適用対象・値の継承
- 初期値
- auto
- 適用対象
- すべての要素。 SVGでは、defs要素とすべてのグラフィックス要素を除くコンテナ要素に適用される
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（sample.css）に記述
img.sample1 {
mask-image: url(‘images/heart.png’);
mask-mode: auto;
}
img.sample2 {
mask-image: url(‘images/heart.png’);
mask-mode: alpha;
}
img.sample3 {
mask-image: url(‘images/heart.png’);
mask-mode: luminance;
}
HTMLソース
<p>
mask-mode: auto; を指定<br>
<img class=”sample1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
mask-mode: alpha; を指定<br>
<img class=”sample2″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
mask-mode: luminance; を指定<br>
<img class=”sample3″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
ブラウザ上の表示
mask-mode: auto; を指定
mask-mode: alpha; を指定
mask-mode: luminance; を指定
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
img.prefix_sample1 {
-webkit-mask-image: url(‘images/heart.png’);
-webkit-mask-mode: auto;
}
img.prefix_sample2 {
-webkit-mask-image: url(‘images/heart.png’);
-webkit-mask-mode: alpha;
}
img.prefix_sample3 {
-webkit-mask-image: url(‘images/heart.png’);
-webkit-mask-mode: luminance;
}
HTMLソース
<p>
mask-mode: auto; を指定<br>
<img class=”prefix_sample1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
mask-mode: alpha; を指定<br>
<img class=”prefix_sample2″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
mask-mode: luminance; を指定<br>
<img class=”prefix_sample3″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
ブラウザ上の表示
mask-mode: auto; を指定
mask-mode: alpha; を指定
mask-mode: luminance; を指定