普通、画像を切り抜きたい時は、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-)は必須です。
今回は透過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;
}
このようにすると、リピートを解除することができます。
他にも、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;
}
センターに寄せました。
他にも、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 */
}
星の大きさを変えてみました。
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;
}
Microsoft Edgeは非対応
Internet Explorerはお察しの通りですが、Edgeにも対応していません。
プレフィックスは記述すれば、他のブラウザはほぼ対応しています。
詳細は「Can I use」で確認してください。
マスクをアニメーションと組み合わせてみると、面白そうですね。
皆さんも試してみて下さい。