★CSSリファレンス
mask-imageプロパティは、マスクレイヤーとなるイメージを指定する際に使用します。
mask-imageプロパティの初期値は none です。 この場合、マスクイメージは完全透明な黒色のレイヤーとみなされるため、結果としてマスク効果無しとなります。
マスクレイヤーイメージを指定するには、mask-imageプロパティの値に、イメージ値、または、画像のURLを指定します。
■値
- none
- 透明なレイヤーとみなされるため、結果としてマスク効果無しとなる（初期値）
- イメージ値
- 一部透過されたグラデーションなど
- url('マスクレイヤー画像のURL')
- マスクレイヤー画像へのパスをURLで指定
■初期値・適用対象・値の継承
- 初期値
- none
- 適用対象
- すべての要素。 SVGでは、defs要素とすべてのグラフィックス要素を除くコンテナ要素に適用される
- 値の継承
- しない
イメージ値とは、例えば一部を透過したグラデーションなどのことです。 以下の使用例１で確認してください。
■使用例１（イメージ値で指定）
CSSソースは外部ファイル（sample.css）に記述
img.gra1 {mask-image: radial-gradient(red, transparent 100%);
-webkit-mask-image: radial-gradient(red, transparent 100%);
}
HTMLソース
<p>マスクを指定しない画像<br>
<img src="images/uirou.png">
</p>
<p>
一部を透過した円形グラデーションでマスクを指定した画像<br>
<img class="gra1" src="images/uirou.png">
</p>
ブラウザ上の表示
マスクを指定しない画像
一部を透過した円形グラデーションでマスクを指定した画像
また、mask-imageプロパティの値に、一部を透明にしたPNG・GIF・SVG などの画像のURLを指定することもできます。 この場合、 mask-image: url('マスクレイヤー画像のURL'); という具合に指定します。
以下の使用例２では、ハートの図形以外を透明にした画像をマスクレイヤーとして使用します。 mask-imageプロパティでは、ハートの図形部分が隠されるのではなく、透明部分が隠されて図形部分が表示されます。
■使用例２（画像のURLで指定）
CSSソースは外部ファイル（sample.css）に記述
img.sample1 {mask-image: url('images/heart.png');
}
HTMLソース
<p>マスクを指定しない画像<br>
<img src="images/uirou.png">
</p>
<p>
マスクレイヤーとして使用する画像<br>
<img src="images/heart.png">
</p>
<p>
マスクを指定した画像<br>
<img class="sample1" src="images/uirou.png">
</p>
ブラウザ上の表示
マスクを指定しない画像
マスクレイヤーとして使用する画像
マスクを指定した画像
■ベンダープレフィックスを付けた場合の使用例２（画像のURLで指定）
CSSソースは外部ファイル（sample.css）に記述
img.prefix_sample1 {-webkit-mask-image: url('images/heart.png');
}
HTMLソース
<p>マスクを指定しない画像<br>
<img src="images/uirou.png">
</p>
<p>
マスクレイヤーとして使用する画像<br>
<img src="images/heart.png">
</p>
<p>
マスクを指定した画像<br>
<img class="prefix_sample1" src="images/uirou.png">
</p>
ブラウザ上の表示
マスクを指定しない画像
マスクレイヤーとして使用する画像
マスクを指定した画像
mask-imageプロパティの値をカンマ区切りで複数指定することで、複数のマスクイメージレイヤーを組み合わせることができます。 以下の使用例３で確認してください。
■使用例３（カンマ区切りで複数指定）
CSSソースは外部ファイル（sample.css）に記述
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%);
}
HTMLソース
<p>マスクを指定しない画像<br>
<img src="images/uirou.png">
</p>
<p>
ハート図形画像と円形グラデーションを組み合わせてマスクを指定した画像<br>
<img class="multi1" src="images/uirou.png">
</p>
ブラウザ上の表示
マスクを指定しない画像
ハート図形画像と円形グラデーションを組み合わせてマスクを指定した画像
Sponsors
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
