mask-imageを使ってみる

画像を使って要素に対してマスクを行うことのできる、CSSプロパティのmask-imageを試してみます。

対応ブラウザ

対応ブラウザはこちらで、主要なブラウザでは特に問題なくサポートしているようです。

設定方法

マスク用画像としてこちらの画像を使用して、まずは簡単な設定を試してみます。

<div class="sample"></div>

CSSは必要な部分のみの抜粋になります。

.sample {
  background: darkgreen;
  mask-image: url(star.svg);
}

これで緑背景を設定した要素を、星形でマスクすることができました。
mask-imageのデモページ

mask関連のプロパティは他にもいくつかあるので、合わせて確認してみます。
まずはmask-sizeで、マスク画像のサイズを指定します。

coverを指定すると、要素全体を覆う最小値になります。

.sample {
  background: darkgreen;
  mask-image: url(star.svg);
  mask-size: cover;
}

mask-size:cover;のデモページ

containを指定すると、要素内に収まる最大値になります。

.sample {
  background: darkgreen;
  mask-image: url(star.svg);
  mask-size: contain;
}

詳細は後述しますが、mask-repeatの設定をしていない(初期値がrepeat)ため、空いているスペースにマスクが追加されます。
mask-size:contain;のデモページ

数値での指定も可能です。

.sample {
  background: darkgreen;
  mask-image: url(star.svg);
  mask-size: 100px 100px;
}

mask-sizeでサイズ指定のデモページ

次はmask-repeatで、マスクの繰り返しを指定します。
no-repeatを指定すると、繰り返しなしになります。

.sample {
  background: darkgreen;
  mask-image: url(star.svg);
  mask-size: 100px 100px;
  mask-repeat: no-repeat;
}

mask-repeat:no-repeat;のデモページ

repeat-xでX方向の繰り返しになります。

.sample {
  background: darkgreen;
  mask-image: url(star.svg);
  mask-size: 100px 100px;
  mask-repeat: repeat-x;
}

mask-repeat:repeat-x;のデモページ

spaceを指定すると、マスク画像が見切れない形でできるだけ繰り返すようになります。
最初と最後の画像は要素の両端に寄って、画像間に均等な余白が設定されます。

.sample {
  background: darkgreen;
  mask-image: url(star.svg);
  mask-size: 100px 100px;
  mask-repeat: space;
}

mask-repeat:space;のデモページ

roundを指定すると、マスク画像が見切れない形で、マスクサイズを調整した上で隙間なく配置するようになります。

.sample {
  background: darkgreen;
  mask-image: url(star.svg);
  mask-size: 100px 100px;
  mask-repeat: round;
}

mask-repeat:round;のデモページ

次はmask-originで、マスクの原点位置を指定します。
例えばcontent-boxの場合、コンテンツボックスからの相対位置になります。

.sample {
  padding: 50px;
  background: darkgreen;
  mask-image: url(star.svg);
  mask-size: 100px 100px;
  mask-repeat: no-repeat;
  mask-origin: content-box;
}

mask-origin:content-box;のデモページ

次はmask-positionで、mask-origin の原点を元にした位置を指定します。

.sample {
  background: darkgreen;
  mask-image: url(star.svg);
  mask-size: 100px 100px;
  mask-repeat: no-repeat;
  mask-position: 10px 50px;
}

X方向を10px、Y方向を50pxの位置を基準に配置できました。
mask-positionのデモページ

キーワード値を使った指定も可能です。

.sample {
  background: darkgreen;
  mask-image: url(star.svg);
  mask-size: 100px 100px;
  mask-repeat: no-repeat;
  mask-position: center center;
}

中央位置を基準に配置できました。
mask-positionのデモページ2

次はmask-clipで、マスクが影響する領域を指定します。
例えばcontent-boxを指定すると、コンテンツボックスのみをマスク領域にします。

.sample {
  padding: 50px;
  background: darkgreen;
  mask-image: url(star.svg);
  mask-size: 100px 100px;
  mask-clip: content-box;
}

mask-clip:content-box;のデモページ

次はmask-compositeで、複数のマスク画像を設定した場合の合成方法を指定します。
addを指定すると、次のマスクが前のマスクの上に配置されます

.sample {
  background: darkgreen;
  mask-image: url(star.svg), url(circle.svg);
  mask-repeat: no-repeat;
  mask-size: 350px 350px;
  mask-position: left top, right top;
  mask-composite: add;
}

mask-composite:add;のデモページ

subtractを指定すると、前のマスクの外側に次のマスクが配置される(前のマスクから次のマスクで減算する)ようになります。

.sample {
  background: darkgreen;
  mask-image: url(star.svg), url(circle.svg);
  mask-repeat: no-repeat;
  mask-size: 350px 350px;
  mask-position: left top, right top;
  mask-composite: subtract;
}

mask-composite:subtract;のデモページ

intersectを指定すると、前のマスクと重なっている次のマスク部分が前のマスクを置き換える(前のマスクと重なっている次のマスク部分をマスクにする)ようになります。

.sample {
  background: darkgreen;
  mask-image: url(star.svg), url(circle.svg);
  mask-repeat: no-repeat;
  mask-size: 350px 350px;
  mask-position: left top, right top;
  mask-composite: intersect;
}

mask-composite:intersect;のデモページ

excludeを指定すると、次のマスクと前のマスクで重なっていない領域が結合される(次のマスクと前のマスクで重なっている部分以外をマスクにする)ようになります。

.sample {
  background: darkgreen;
  mask-image: url(star.svg), url(circle.svg);
  mask-repeat: no-repeat;
  mask-size: 350px 350px;
  mask-position: left top, right top;
  mask-composite: exclude;
}

mask-composite:exclude;のデモページ

最後にmask-modeで、マスク画像を輝度とアルファマスクのどちらで扱うかを指定します。

マスク画像をjpgの画像に変更した上で、mask-modeにluminanceを指定してみます。
luminanceの場合はマスク画像の輝度の値をマスクの値として使用します。

.sample {
  background: darkgreen;
  mask-image: url(img.jpg);
  mask-size: cover;
  mask-mode: luminance;
}

mask-mode:luminance;のデモページ