恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【CSS】maskプロパティで画像を切り抜く方法(マスク処理)

投稿日:2018-09-05 更新日:




普通、画像を切り抜きたい時は、Photoshopなどのソフトを使用すると思います。

例えば以下のような処理です。

このチューリップの画像を、

この星の画像で

このように切り抜く処理です。

実はこれ、CSSで実装できます(Microsoft Edge、IEは非対応)。

mask プロパティ

一つ一つのプロパティを説明していきます。

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

基本的にはこんな感じで切り抜きができます。

現状、プレフィックス(-webkit-)は必須です。


今回は透過png画像を使っていますが、SVGでも切り抜くことができます。

SVGはサイズを変えてもにじまないので、実際に使う時はSVGの方が便利かと思います。

他のプロパティも指定して、見た目を変化させてみましょう。

mask-repeat

mask-repeatは、マスクをどのようにリピートさせるかを設定するプロパティです。

htmlは上と同じ。

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

このようにすると、リピートを解除することができます。

他にも、repeat(初期値)、repeat-x、repeat-y、space、roundがあります。

お気づきかもしれませんが、background-repeatと似ています。

mask-repeatに限らず、mask系のプロパティはbackground系のプロパティに似ています。

ですので、backgroundの書き方が分かれば、maskの書き方もすぐ覚えられます。

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

センターに寄せました。

他にも、top、bottom、left、right、%やpxなどの単位を使った指定ができます

これも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 */
}

星の大きさを変えてみました。

数値+単位の他にも、coverやcontain、auto(初期値)のような指定もできます

background-size みたいなものですね。

maskプロパティにまとめて書く

maskプロパティで、マスクに関する指定をまとめて行うことができます。

maskプロパティで指定できるのは順番に、 mask-image・ mask-mode・ mask-repeat・ mask-position・ mask-clip・ mask-origin・ mask-size・ mask-composite です。

mask-mode、mask-clip、mask-origin、mask-compositeについてはこの記事では説明していませんが、気になる方はご自身で調べてみて下さい。

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

Microsoft Edgeは非対応

Internet Explorerはお察しの通りですが、Edgeにも対応していません。

プレフィックスは記述すれば、他のブラウザはほぼ対応しています。

詳細は「Can I use」で確認してください。

 

マスクをアニメーションと組み合わせてみると、面白そうですね。

皆さんも試してみて下さい。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TAC

TAC

Webデザイナー、フロントエンドエンジニア。 Webデザイン、HTML/CSS、JavaScript、PHP、SEOが専門です。