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

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

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のプロパティも忘れずに記述しましょう。