画像を別画像でマスキングしたいことってないですか？
例えばいくつか例を挙げるなら、
- 画像を黄色の星形に切り抜きしたい
- 画像をヒョウ柄のハートマークで切り抜きたい
- 画像を水玉模様に重ねて切り抜きたい
・・・みたいな感じで
実はこれ、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だと思います。
ただし画像を画像で切り取るようにマスキングをしたい場合・・・
マスクに使う画像は透過色を含んでる必要があります。
つまり星形に画像を切り取りたいなら次の手順
- 星形（ ★ ＜＝ こんなの ）をした画像を作る
- その画像の★以外の場所を透過させる
- 最後に対象画像をそれでマスキングさせる
大事なのはマスキングする画像に透過色を含めることですね。
試しに mask-image で画像を星形でマスキングしてみた
ということで実践です。
ここでは例として、画像を星形の画像でマスキングすることにします。
その手順を簡単にまとめると次の通り
１．まずマスク画像を用意しよう
まずマスキングしたい画像に被せたい画像を用意します。
今回使わせてもらうのは、いらすとやからDLした次の画像
この画像を他の画像にかさね、星形に切り抜きしてみます、
ただし！
見てわかる通り、この画像は背景が透過してません。
なので適当なソフトを使ってバックを透過させときます。
市松模様になってるのが、透明部分
こういう風にマスキングに使う画像は必ず透過させときましょう。
あと透過には PNG を使うのが確実です。
JPEG は透過が使えないし、GIF は透過の質がよくないので（あと扱いにくい）
２．画像をマスキングするCSSを書く
次は画像をマスキングする処理を書いていきます。
次みたいに画像要素にCSSを適用するだけです。
まず次みたいに専用クラスのついたimg要素を作成
1 | <img class="mask star" src="kuma.jpg" /> |
ここでは mask star というクラスを付けてます。
あとマスキング対象の画像、こっちはPNG以外でも問題ないです。’（多分）
そして最後に次のCSSを追加
1 2 3 4 5 6 | .mask.star{ mask-image: url('images/star.png'); -webkit-mask-image: url('images/star.png'); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; } |
上CSSのごとく mask-image にマスクする画像URLを渡すだけ
あと mask-repeat: no-repeat; を付けて、星形が連続しないようにしてます。
もし画像全体に星形をしきつめたいなら、このプロパティはなくてもOKです。
どういう風にマスキングされたかは次画像の通り
▲ 星形マスキングされたクマちゃん
もちろん画像の形を変えれば、どんな複雑な形でも切り取り可能
ちなみにマスキング画像の位置を変えるには
最後に少し補足
今紹介したコード例だと、マスク画像は左上に来ちゃいます。
もし任意の位置に表示するなら mask-position で位置を変更可能です。
▼ 例えば画像の真ん中でマスクするコード例
1 2 3 4 5 6 7 8 | .mask.star{ mask-image: url('images/star.png'); -webkit-mask-image: url('images/star.png'); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: right bottom; -webkit-mask-position: 50% 50%; } |
これでどんな画像でも、どんな位置でもマスキングできるようになります。
mask-imageプロパティ使用時の注意点
こういう風に便利な mask-image プロパティですが、１つ注意点
それは対応ブラウザが制限されていること
残念ながら、すべてのブラウザで mask-image は使えません。
どういうブラウザで使用不可なのかは次の Can I Use を参照してください。
モダンブラウザなら対応されているが、
IEだと全バージョン、また一部モバイルブラウザだと未対応になってる模様
あとそれから、 Chrome や Safari の場合、ベンダープリフィックスも必要 です。
▼ mask 関係を使うときは -webkit- を付けるのが無難
1 2 3 4 5 6 7 8 | .mask.star{ mask-image: url('images/star.png'); -webkit-mask-image: url('images/star.png'); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: right bottom; -webkit-mask-position: 50% 50%; } |
ベンダープリフィックスにさえ気を付ければ、
まともなブラウザ（IEは除く）なら問題なく使えるので、それほど心配する必要ありません。
ちなみにパスで画像を切り抜く clip-path というのもある
あと今紹介したのとは少し違うけど clip-path というのもあります。
この clip-path はパスで画像を切り抜くためのプロパティ
詳しくは次記事で詳解したので、興味のある方はどうぞ
SVGで好きな形を定義しておけば、どんな形でも切り抜けるので便利です。
ここまでのまとめ
という訳で mask-image が便利だよっていう話でした。
ただし便利だけど、次の２点には注意です。
- マスキング画像に透過色を設定すること
- ブラウザによってはサポートされていないこと
以上、CSSで画像を別画像でマスキングするやり方でした。
