メニュー

小金井にあるWEB制作会社の備忘録

MEMORANDUM

CSS「mask-image」を使用して画像を好きな形でマスキング（切り欠き）する

  • 公開日：2025-02-01
  • 最終更新日：2025-01-16
  • 157

画像を使用する際に、曲線等の特殊な形で実装したい時があります。
マスク済みの画像を用意する方法もありますが、動的に呼び出すコンテンツ等の場合は都度作成が難しい場合もあるため、CSSでマスキングする方法をメモ。

マスク用の画像を用意する

マスクしたい形の画像（マスク用画像）をPNG形式やSVG形式で用意します。
この時、画像を残したい（有効にしたい）方に色を付け、削る方を透明にします。

コードの実装

HTML

<figure>
<img src="画像のurl" class="image__mask">
</figure>

CSS

.image__mask {
	-webkit-mask-image: url(マスク用画像のURL);
	mask-image: url(マスク用画像のURL);
	mask-size: 100% auto;
	mask-position: bottom;
	mask-repeat: no-repeat;
}

サンプル

RANKING

人気記事

同一カテゴリーの記事