mask-imageプロパティは、マスクレイヤーとなるイメージを指定する際に使用します。
mask-imageプロパティの初期値は none です。
この場合、マスクイメージは完全透明な黒色のレイヤーとみなされるため、結果としてマスク効果無しとなります。
マスクレイヤーイメージを指定するには、mask-imageプロパティの値に、イメージ値、または、画像のURLを指定します。
イメージ値とは、例えば一部を透過したグラデーションなどのことです。
以下の使用例１で確認してください。
img.gra1 {
mask-image: radial-gradient(red, transparent 100%);
-webkit-mask-image: radial-gradient(red, transparent 100%);
}
<p>
マスクを指定しない画像<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
一部を透過した円形グラデーションでマスクを指定した画像<br>
<img class=”gra1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
マスクを指定しない画像
一部を透過した円形グラデーションでマスクを指定した画像
また、mask-imageプロパティの値に、一部を透明にしたPNG・GIF・SVG などの画像のURLを指定することもできます。
この場合、
mask-image: url(‘マスクレイヤー画像のURL’);
という具合に指定します。
以下の使用例２では、ハートの図形以外を透明にした画像をマスクレイヤーとして使用します。
mask-imageプロパティでは、ハートの図形部分が隠されるのではなく、透明部分が隠されて図形部分が表示されます。
img.sample1 {
mask-image: url(‘images/heart.png’);
}
<p>
マスクを指定しない画像<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
マスクレイヤーとして使用する画像<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/heart.png”>
</p>
<p>
マスクを指定した画像<br>
<img class=”sample1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
マスクを指定しない画像
マスクレイヤーとして使用する画像
マスクを指定した画像
img.prefix_sample1 {
-webkit-mask-image: url(‘images/heart.png’);
}
<p>
マスクを指定しない画像<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
マスクレイヤーとして使用する画像<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/heart.png”>
</p>
<p>
マスクを指定した画像<br>
<img class=”prefix_sample1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
マスクを指定しない画像
マスクレイヤーとして使用する画像
マスクを指定した画像
mask-imageプロパティの値をカンマ区切りで複数指定することで、複数のマスクイメージレイヤーを組み合わせることができます。
以下の使用例３で確認してください。
img.multi1 {
mask-image: url(‘images/heart.png’), radial-gradient(red, transparent 100%);
-webkit-mask-image: url(‘images/heart.png’), radial-gradient(red, transparent 100%);
}
<p>
マスクを指定しない画像<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
<p>
ハート図形画像と円形グラデーションを組み合わせてマスクを指定した画像<br>
<img class=”multi1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/uirou.png”>
</p>
マスクを指定しない画像
ハート図形画像と円形グラデーションを組み合わせてマスクを指定した画像
