CSSで画像をマスクする方法！

WEBサイトを制作してると、画像を加工する場面が多々あります。
加工にも様々な方法がありますが、その中でもよく使う加工の方法では画像をマスクする方法ではないでしょうか。

デザイン制作ではPhotoshopで行い、マスクもこの工程で行うのが通常なのですが、CSSでもマスクをする事は可能です。

今回はこの画像にマスクをかける方法をCSSで実現する方法をご紹介していきたいと思います！

まず2種類の画像を用意します

マスクをかけたい画像

以下の画像にマスクをして、ある形に変えたいと思います。

マスク用の画像

こちらは、マスクの画像になります。
上記の天の川の画像を、この星の形にマスクしていきます。

画像をCSSでマスクする実装方法

まずは、以下のようにHTMLをマークアップしていきます。

<div class="image-mask">
  <img class="mask" src="images/mask-image_bg.jpg" alt="天の川">
</div>

次に上記のHTMLに、CSSでマスクをかけていきます。
以下のようにCSSを記載します。

.mask{
  mask-image: url("/images/mask-image.png");
  mask-repeat: no-repeat;
  -webkit-mask-image: url("/images/mask-image.png");
  -webkit-mask-repeat: no-repeat;
}

実行結果は以下になります。

mask-imageを使う時の注意点

こちらのプロパティでは、Chrome・safariにはベンダープレフィックスが必要です。
また、IEは対象外ですので、IEをターゲットブラウザにしている場合には注意が必要です。

まとめ

CSSで画像をマスクする方法についてご紹介いたしましたが、いかがだったでしょうか？

ご興味のある方は是非一度、お試しください！