トップページ  > CSS  > mask-image

★CSSリファレンス

mask-image …… マスクレイヤーとなるイメージを指定する
Google Chrome(-webkit-) Safari(-webkit-) Firefox Opera(-webkit-)
広告

mask-imageプロパティは、マスクレイヤーとなるイメージを指定する際に使用します。

mask-imageプロパティの初期値は none です。 この場合、マスクイメージは完全透明な黒色のレイヤーとみなされるため、結果としてマスク効果無しとなります。

マスクレイヤーイメージを指定するには、mask-imageプロパティの値に、イメージ値、または、画像のURLを指定します。

■値

none
透明なレイヤーとみなされるため、結果としてマスク効果無しとなる(初期値)
イメージ値
一部透過されたグラデーションなど
url('マスクレイヤー画像のURL')
マスクレイヤー画像へのパスをURLで指定

■初期値・適用対象・値の継承

初期値
none
適用対象
すべての要素。 SVGでは、defs要素とすべてのグラフィックス要素を除くコンテナ要素に適用される
値の継承
しない

イメージ値とは、例えば一部を透過したグラデーションなどのことです。 以下の使用例1で確認してください。

■使用例1(イメージ値で指定)

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'); という具合に指定します。

以下の使用例2では、ハートの図形以外を透明にした画像をマスクレイヤーとして使用します。 mask-imageプロパティでは、ハートの図形部分が隠されるのではなく、透明部分が隠されて図形部分が表示されます。

■使用例2(画像の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>
↓↓↓

ブラウザ上の表示

マスクを指定しない画像

マスクレイヤーとして使用する画像

マスクを指定した画像

■ベンダープレフィックスを付けた場合の使用例2(画像の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プロパティの値をカンマ区切りで複数指定することで、複数のマスクイメージレイヤーを組み合わせることができます。 以下の使用例3で確認してください。

■使用例3(カンマ区切りで複数指定)

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
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ