【CSS】マスクを使って画像を切り抜く方法

マスクを使って画像を切り抜く

imgタグとbackground-imageプロパティを使用する場合の２パターンを考えます。

HTML（imgタグの場合）

<div class="mask-img">
  <img src="./images/img-original.png" alt="">
</div>

HTML（背景画像の場合）

<div class="mask-img"></div>

background-imageプロパティを使用して背景画像として画像を表示する場合、imgタグは不要です。

CSS

.mask-img {
  /* 元画像のサイズ指定 */
  width: 200px;
  height: 300px;

  /* （背景画像の場合） 元画像の指定 */
  background-image: url(./images/img-original.png);
  background-size: cover;
  background-position: center 0;
  background-repeat: no-repeat;

  /* マスク画像の指定 */
  mask-image: url(./images/img-mask.png);
  -webkit-mask-image: url(./images/img-mask.png);

  /* マスク画像のサイズ指定 */
  mask-size: 200px 300px; /* 横幅 縦幅 */
  -webkit-mask-size: 200px 300px;

  /* マスク画像の位置指定 */
  mask-position: center 0;
  -webkit-mask-position: center 0;

  /* マスク画像をリピートするかの指定 */
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

chromeやsafariなどのブラウザでも動作させるため、-webkitのプロパティも忘れずに記述しましょう。