maskプロパティを使ってCSSだけで画像を切り抜く方法

画像を切り抜くのはPhotoshopなどを使う方法が一般的ですが、実はCSSだけでも画像を切り抜くことができます。

今回はCSSのmaskプロパティを使って画像を切り抜く方法を紹介します。

 

maskプロパティの使い方

指定できる値はいくつかあるので順に解説していきます。

 

mask-image

HTMLのimgタグには背景画像を表示し、CSSのmask-imageで切り抜きたい形の画像を指定します。

例えば以下のような感じです。HTMLでは花の画像を背景に表示し、CSSの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');
}

 

これで花の背景画像が星型に切り取られます。

上のコードでは画像はpngになっていますが、実際に使うときはSVGファイルを使った方が綺麗に切り抜けると思います。

また、ベンダーインプレックスは必要になるのでつけておいてください。

 

mask-repeat

mask-repeatでは切り抜きをリピートするかどうかを指定できます。background-repeatと使用感は同じです。

no-repeatを指定すると切り抜きがリピートされなくなります(指定しない場合はリピートして切り抜かれる)

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

 

background-repeatと同じようにrepeat-xやrepeat-yなども指定することができます。

mask-repeatとbackground-repeatは同じと覚えましょう。

 

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;
}

 

今回はbackground-repeat: center;を指定したので中央で切り抜かれるはずです。

他にもtop、bottom、left、rightなどがあります。これも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 */
}

数値は横幅、高さの順に指定します。省略した場合はautoになります。

他にもcontainやcoverなどを指定できます。これもbakcground-sizeと値の指定方法は同じです。

 

maskをまとめて書く

ここまでくれば気づいたかも知れませんが、maskもbackgroundのようにまとめて指定することができます。

順番としては、mask-image、mask-mode、mask-repeat、mask-potision、mask-clip、mask-origin、mask-size、mask-compositeとなります。

知らない値が出てきていますが、あまり気にする必要のない値です。

 

まとめて書くと以下のようになると思います。やっぱりbackgroundと同じような書き方です。

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

 

ブラウザサポート

ブラウザサポートに関してですが、IEとEdgeはサポート対象外です。

実務で使うときは普通にPhotoshopで切り抜いた方がいいですね。

そのほかのブラウザはベンダーインプレックスをつければ大丈夫です。

実用的なプロパティかどうかは怪しいですが…一度使ってみると面白いと思います。