はじめに
同じ画像を使いまわしたいけど色が異なる際に、色だけが異なるimageを複数保存するのって無駄な気がするから避けたいし、何より用意するの面倒ですよね..
そんな時は画像をマスキングして色変えすることで、一つのイメージを使いましてみましょう！
よく使われている代表的なブラウザではmask関連のCSSが使えるので、IEのサポートが終了したことで基本的には使えると思って大丈夫です！
※ブラウザによっては-webkit等のベンダープリフィックスもあわせて指定必要あります。
用意するもの
- 背景透過された画像を用意する(png, svg等)
実際にやってみよう
1, 切り抜く対象となる要素にbackground-colorを適用する
2, 切り抜きたい画像をmask-imageに指定したマスキング用のCSSを作成し、対象の要素に適用する
.masked {
-webkit-mask-image: url('star.svg'); /*マスクレイヤーとして使用する画像*/
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 0 0;
-webkit-mask-size: auto 100%;
mask-image: url('star.svg');
mask-repeat: no-repeat;
mask-position: 0 0;
mask-size: auto 100%;
}
mask-image : 渡した画像の形を読み込み、切り抜く形を指定する
mask-repeat : マスク画像をどのように繰り返すか ex) no-repeat, repeat, repeat-x etc..
mask-position : 切り抜き元の画像のどの位置を切り抜くか指定できる
mask-size : マスク画像のサイズを指定できる
切り抜いた要素を指定した色で塗っているではなく指定した色の四角い要素を指定した形切り抜いているという点に気をつけましょう！
あくまで外側に適用してするpaddingやmarginがある場合、切り抜いた画像ではなく色を指定している要素に対して適用されています。
注意点
1, 型取りたい輪郭を指定するための画像は必ず背景透過のものを用意する
以下のような画像をmask-imageに指定しても、画像自体の輪郭しか見ていないので、四角く切り抜かれてしまう
2, 内側の透過はマスキングできない
アイコンでよくありがちな内側も透過している画像をマスキングはできないので注意
1同様mask-imageでは画像の輪郭のみチェックしているので、画像内側に透過箇所があっても、マスキングできない
最後に
色違いの画像や, こだわりの形にトリミングするのが面倒！という時にをさくっと使えるmaskの紹介でした
是非活用してみてください
Discussion