画像を別画像でマスキングしたいことってないですか？

例えばいくつか例を挙げるなら、

• 画像を黄色の星形に切り抜きしたい
• 画像をヒョウ柄のハートマークで切り抜きたい
• 画像を水玉模様に重ねて切り抜きたい

・・・みたいな感じで

実はこれ、CSSの mask-image  を使えば超簡単にできます。

ただし、画像で画像を切り抜くわけなので、少し工夫が必要でした。

ということで、そこらへんの注意点も含め、
CSSの mask-image プロパティで画像をマスキングする手順 を紹介します。

画像マスキングするには mask-image プロパティを使う

画像のマスキングには mask-image  というCSS3のプロパティを使います。

これについての説明は次の通り

mask-image は CSS のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。

引用元　：　https://developer.mozilla.org/ja/docs/Web/CSS/mask-image

えっ、、、説明これだけ！？

とりあえずある画像をマスキングしたいとき、そのマスキングに使いたい画像を指定するためのプロパティっていう認識でOKだと思います。

ただし画像を画像で切り取るようにマスキングをしたい場合・・・

マスクに使う画像は透過色を含んでる必要があります。

つまり星形に画像を切り取りたいなら次の手順

1. 星形（ ★ ＜＝ こんなの ）をした画像を作る
2. その画像の★以外の場所を透過させる
3. 最後に対象画像をそれでマスキングさせる

大事なのはマスキングする画像に透過色を含めることですね。

試しに mask-image で画像を星形でマスキングしてみた

ということで実践です。

ここでは例として、画像を星形の画像でマスキングすることにします。

その手順を簡単にまとめると次の通り

１．まずマスク画像を用意しよう

まずマスキングしたい画像に被せたい画像を用意します。

今回使わせてもらうのは、いらすとやからDLした次の画像

この画像を他の画像にかさね、星形に切り抜きしてみます、

ただし！
見てわかる通り、この画像は背景が透過してません。

なので適当なソフトを使ってバックを透過させときます。

市松模様になってるのが、透明部分

こういう風にマスキングに使う画像は必ず透過させときましょう。

あと透過には PNG を使うのが確実です。
JPEG は透過が使えないし、GIF は透過の質がよくないので（あと扱いにくい）

２．画像をマスキングするCSSを書く

次は画像をマスキングする処理を書いていきます。

次みたいに画像要素にCSSを適用するだけです。

まず次みたいに専用クラスのついたimg要素を作成

ここでは mask star  というクラスを付けてます。

あとマスキング対象の画像、こっちはPNG以外でも問題ないです。’（多分）

そして最後に次のCSSを追加

上CSSのごとく mask-image  にマスクする画像URLを渡すだけ

あと mask-repeat: no-repeat;  を付けて、星形が連続しないようにしてます。
もし画像全体に星形をしきつめたいなら、このプロパティはなくてもOKです。

どういう風にマスキングされたかは次画像の通り

▲  星形マスキングされたクマちゃん

もちろん画像の形を変えれば、どんな複雑な形でも切り取り可能

ちなみにマスキング画像の位置を変えるには

最後に少し補足

今紹介したコード例だと、マスク画像は左上に来ちゃいます。

もし任意の位置に表示するなら mask-position  で位置を変更可能です。

▼ 例えば画像の真ん中でマスクするコード例

これでどんな画像でも、どんな位置でもマスキングできるようになります。

mask-imageプロパティ使用時の注意点

こういう風に便利な mask-image プロパティですが、１つ注意点

それは対応ブラウザが制限されていること

残念ながら、すべてのブラウザで mask-image  は使えません。

どういうブラウザで使用不可なのかは次の Can I Use を参照してください。

caniuse.com

 

12920 Pockets

Can I use... Support tables for HTML5, CSS3, etc

https://caniuse.com/#feat=css-masks

モダンブラウザなら対応されているが、
IEだと全バージョン、また一部モバイルブラウザだと未対応になってる模様

あとそれから、 Chrome や Safari の場合、ベンダープリフィックスも必要 です。

▼ mask 関係を使うときは -webkit-  を付けるのが無難

ベンダープリフィックスにさえ気を付ければ、
まともなブラウザ（IEは除く）なら問題なく使えるので、それほど心配する必要ありません。

ちなみにパスで画像を切り抜く clip-path というのもある

あと今紹介したのとは少し違うけど clip-path  というのもあります。

この clip-path はパスで画像を切り抜くためのプロパティ

詳しくは次記事で詳解したので、興味のある方はどうぞ

PisukeCode - Web開発まとめ

 

5 Pockets

【CSS】画像を円とか三角とか好きな形に切り抜くテクまとめ【clip-path】

https://pisuke-code.com/css-examples-of-clip-path

CSSで画像を切り抜きしたいとき、スゴク便利なのがあります。それが clip-path  というプロパティ僕は今まで知らなかったんですが、使ってみたら超便利でした。ただ使い方を思い出すのは大変なので、ここでは clip-path で画像を好きな形に切り抜くコード例とかを紹介します。そもそも clip-path って何？まず clip-path  とは何なのかについて、少しだけ説明これは名前の通り、パスで画像を切り抜き（クリップ）できるプロパティ▼ 以下リファレンスでの説明引用CSS の clip-path プロパティは、要素のどの部分を表示するかを設定する...

SVGで好きな形を定義しておけば、どんな形でも切り抜けるので便利です。

ここまでのまとめ

という訳で mask-image が便利だよっていう話でした。

ただし便利だけど、次の２点には注意です。

• マスキング画像に透過色を設定すること
• ブラウザによってはサポートされていないこと

以上、CSSで画像を別画像でマスキングするやり方でした。