CSS【 mask 】～マスキング

前回、clip-pathプロパティを使ったクリッピングを紹介しましたが（CSS【 clip-path 】～クリッピング）、マスキングでもクリッピングと同じようなことができます。
クリッピングは、切り抜いた画像をそのまま表示するか、全く表示しないかの扱いとなりますが、マスキングは、半透明効果やマスクの濃淡などを加味することができます。
今回は、このようなmaskプロパティを使ったマスキング方法についてまとめたいと思います。

1. マスキングとは

CSS上のマスキングとは、マスキング本来の意味の通り、ある領域を保護するために覆いをかける処理をいいます。

覆いをかける画像等に注目すると、必要に応じて切り取った素材で覆いをかけるため、クリッピングによってもマスキングを実現することができます。

今回は、maskプロパティを使用したマスキング方法を紹介します。
maskプロパティを使用する際には、PNG画像やCSSグラデーション、SVG要素を使ってマスキングしますが、今回は、PNG画像を使って進めていきます。
但し、clip-pathプロパティと同様に、現時点では、IEなど未対応のブラウザもあるため注意が必要です。

▲目次へ戻る

2. maskプロパティ

maskプロパティは、以下の各プロパティをまとめて指定できるショートハンドプロパティです。

mask-image	マスク画像の指定 　値：none、url()
mask-mode	マスク画像のモードを指定 　値：alpha、luminance
mask-repeat	マスク画像の表示スタイルを指定 　値：no-repeat、repeat-x、repeat-y、space、round
mask-position	マスク画像の表示位置を指定
mask-size	マスク画像の大きさを指定
mask-composite	複数のマスク画像の組合せを指定

　
ショートハンドのmaskプロパティで、複数のプロパティを一括指定する場合、mask-sizeプロパティはmask-positionプロパティの後に、「/」の記号を使って区別して指定する必要があります。
また、mask-sizeプロパティを指定する際には、必ずmask-positionプロパティを指定する必要があります。

▲目次へ戻る

3. mask-imageプロパティ

mask-imageプロパティは、マスク画像を指定する際に使用します。

mask-image:noneの場合は、マスク画像を指定しないという意味ではなく、透明な黒画像として認識されます。
mask-image:url()の場合は、カッコ内にPNG画像ファイルやSVGファイルのパスなどを記述して、マスク画像を指定します。

また、カンマで区切って、マスク画像を複数指定することもできます。

.mask {
  mask-image: url(image.png), none;
}

　
svg要素をmask要素のidと一緒に参照することもできます。

.mask {
  mask-image: url(#image);
}

　
グラデーション画像も、mask-imageプロパティに適しています。
（グラデーションの指定方法についてはCSS【 background】２ ～ background-imageでレイヤーやグラデーションもをご参照下さい。）

.mask {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

▲目次へ戻る

4. mask-modeプロパティ

mask-modeプロパティは、マスク画像をアルファマスクかルミナンスマスクに指定する際に使用します。

アルファマスク

アルファマスクは、アルファチャンネルの画像です。
アルファチャンネルには、透明度の情報が各ピクセルに含まれています。
mask-mode:alpha と指定されている場合は、その画像のアルファ値をマスクの値としてマスキングします。

アルファチャンネルの例として、黒と透明の領域があるPNG形式の画像があります。
黒い領域のマスク要素（アルファ値1）に重なった領域が表示部分となり、透明の領域のマスク要素（アルファ値0）に重なった領域が隠される部分となります。

このPNG画像をアルファマスクとして使います。

上のPNG画像で、このJPG画像をマスキングします。

マスキングの結果、次のような表示となります。

　
ソースは次の通りです。

（CSS）
div.sample{
    mask-image: url(mask.png);
    mask-mode: alpha;}
（HTML）
<div class="sample">
  <div><img src="image.jpg"></div>
</div>

　

ルミナンスマスク

ルミナンスマスクは、画像の輝度値（ルミナンスキー）がマスク値として使われます。
アルファマスクで使ったPNG形式のマスク画像の黒い部分を白にすると、同様にマスキングできます。

上のPNG画像で同じJPG画像をマスキングすると、アルファマスクの時と同じようにマスキングできます。

　
ソースは次の通りです。

（CSS）
div.sample2{
    mask-image: url(mask2.png);
    mask-mode: luminance;}
（HTML）
<div class="sample2">
  <div><img src="image.jpg"></div>
</div>

▲目次へ戻る

5. mask-repeatプロパティ

mask-repeatプロパティを使用して、サイズと位置を指定したマスク画像で、繰り返しマスキングすることができます。
background-repeatプロパティと同じように指定します。

mask-repeatプロパティの値は、次の通りです。

no-repeat	マスク画像を領域内で繰り返し配置しない
norepeat-x	マスク画像を横方向に繰り返し配置する
norepeat-y	マスク画像が縦方向に繰り返し配置する
nospace	マスク画像を領域全体に間隔を空けて繰り返し配置する
noround	マスク画像を指定回数、領域内で繰り返し配置する もし領域内に収まらない場合は、収まるように画像のサイズが自動変更される

　
このPNG画像をマスクに使います。

mask-repeatプロパティにspaceを指定して、先ほどと同じJPG画像をマスキングすると、次のような表示となります。

　
ソースは次の通りです。

（CSS）
div.sample3{
    mask-image: url(mask3.png);
    mask-repeat: space;}
（HTML）
<div class="sample3">
  <div><img src="image.jpg"></div>
</div>

▲目次へ戻る

6. mask-positionプロパティ

mask-positionプロパティは、マスク画像の位置を指定する際に使用します。
デフォルト値はcenterです。

マスク画像をビューポートの左上に置きたい場合は、mask-positionプロパティの値を「0 0」に指定します。

.mask {
  mask-position: 0 0;
}

マスク画像をビューポートの右下に置きたい場合は、mask-positionプロパティの値を「100% 100%」に指定します。

.mask {
  mask-position: 100% 100%;
}

▲目次へ戻る

7. mask-sizeプロパティ

mask-sizeプロパティは、マスク画像のサイズを指定する際に使用します。
background-sizeプロパティと同じ値で指定できます。

mask-sizeプロパティを50%に指定すると、マスク画像の最大幅の50%のサイズで表示されます。

.mask {
  mask-size: 50%;
}

マスク画像を、領域内の最大サイズで表示させたい場合は、mask-sizeプロパティの値を contain に指定します。

.mask {
  mask-size: contain;
}

▲目次へ戻る