【CSS】maskプロパティで画像を切り抜く方法（マスク処理）

普通、画像を切り抜きたい時は、Photoshopなどのソフトを使用すると思います。

例えば以下のような処理です。

このチューリップの画像を、

この星の画像で

このように切り抜く処理です。

実はこれ、CSSで実装できます（Microsoft Edge、IEは非対応）。

mask プロパティ

一つ一つのプロパティを説明していきます。

mask-image

html

<div class="item">
  <img src="./img/flower.jpg" alt="花" class="background">
</div>

css

.item {
  -webkit-mask-image: url('../img/star.png');
  mask-image: url('../img/star.png');
}

基本的にはこんな感じで切り抜きができます。

現状、プレフィックス（-webkit-）は必須です。

DEMO

今回は透過png画像を使っていますが、SVGでも切り抜くことができます。

SVGはサイズを変えてもにじまないので、実際に使う時はSVGの方が便利かと思います。

他のプロパティも指定して、見た目を変化させてみましょう。

mask-repeat

mask-repeatは、マスクをどのようにリピートさせるかを設定するプロパティです。

htmlは上と同じ。

.item {
  -webkit-mask-image: url('../img/star.png');
  mask-image: url('../img/star.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

このようにすると、リピートを解除することができます。

DEMO

他にも、repeat（初期値）、repeat-x、repeat-y、space、roundがあります。

お気づきかもしれませんが、background-repeatと似ています。

mask-repeatに限らず、mask系のプロパティはbackground系のプロパティに似ています。

ですので、backgroundの書き方が分かれば、maskの書き方もすぐ覚えられます。

mask-position

マスクの位置を設定するプロパティです。

.item img {
  -webkit-mask-image: url('../img/star.png');
  mask-image: url('../img/star.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

センターに寄せました。

DEMO

他にも、top、bottom、left、right、％やpxなどの単位を使った指定ができます。

これもbackground-positionに似ていますね。

mask-size

mask-sizeはマスクの大きさを変えるためのプロパティです。

.item img {
  -webkit-mask-image: url('../img/star.png');
  mask-image: url('../img/star.png');
  -webkit-mask-size: 50px; /* 横幅50px、高さはauto */
  mask-size: 50px; /* 横幅50px、高さはauto */
}

星の大きさを変えてみました。

DEMO

数値+単位の他にも、coverやcontain、auto（初期値）のような指定もできます。

background-size みたいなものですね。

maskプロパティにまとめて書く

maskプロパティで、マスクに関する指定をまとめて行うことができます。

maskプロパティで指定できるのは順番に、 mask-image・ mask-mode・ mask-repeat・ mask-position・ mask-clip・ mask-origin・ mask-size・ mask-composite です。

mask-mode、mask-clip、mask-origin、mask-compositeについてはこの記事では説明していませんが、気になる方はご自身で調べてみて下さい。

.item img {
  -webkit-mask: url('../img/star.png') repeat-x bottom / 50px 50px;
  mask: url('../img/star.png') repeat-x bottom / 50px 50px;
}

DEMO

Microsoft Edgeは非対応

Internet Explorerはお察しの通りですが、Edgeにも対応していません。

プレフィックスは記述すれば、他のブラウザはほぼ対応しています。

詳細は「Can I use」で確認してください。

 

マスクをアニメーションと組み合わせてみると、面白そうですね。

皆さんも試してみて下さい。