mask-modeプロパティは、マスクのモードを指定する際に使用します。
マスクのモードとは、マスクレイヤーイメージの輝度値（luminance）、または、アルファ値（alpha）のいずれをマスクとして使用するのかということです。
このページ内のサンプルでは、以下の画像をマスクレイヤーとして使用します。
ハートの図形部分以外は透明にしてあります。
ハートの図形部分のピンク色は完全な不透明なのでアルファ値は 0% です。
尚、輝度とは明るさのことですが、明度とは異なります。
例えば、上記のハート図形のピンク色から単純に色味を抜いてグレースケールにすると、明度が抽出できます。
一方、輝度は光の三原色のR（赤）G（緑）B（青）のうち、人間の目で見た際に明るく感じるG（緑）やR（赤）の重みづけを大きくし、暗く感じるB（青）の重みづけを小さくしたうえで算出されます。
そのため、黄系と青系の2色が同じ明度であったとしても、黄系（R+G）の色は輝度が高く、青系（B）の色は輝度が低くなります。
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;
}
<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; を指定
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;
}
<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; を指定
