https://ics.media/entry/210701/
上記を参考にさせていただいた。
画像に対して、svg のマスクを指定すると切り抜けて、透過のあるPNGファイルをjpegにして容量を軽減するときに使った。
css
#amane-pc{mask-image: url(“img/amane-pc.svg”);
mask-repeat: no-repeat;
mask-position:center;
mask-size: 100%;
/* Chrome, Safari用 */
-webkit-mask-image: url(“img/amane-pc.svg”);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 100%;
}
html
<img id=”amane-pc” src=”/img/index-bg_top02.jpg” alt=”amane”>
メモ：クォーテーションなど置き換わってるので、コピペでは使いにくい。
同じ画像がいくつもページ内ある場合は、id でなく class でいいね。
準備
Adobe Illustrator アドビ イラストレーターで、パスを用意。
画像の外枠と同じサイズの透明な四角もつけて位置をあわせやすくする。
切り抜く図柄に色を付けて、外の透明な四角い枠といっしょに、右クリックでSVGに書き出す。
透過のかかったPNGファイルは、Adobe Photoshop でレイヤーを統合してjpegファイルにする。レイヤーを統合する際に、背景色を、htmlの背景色にあわせておくと、切り抜かれた周りが、ブラウザできれいに表示できると思う。切り抜きパスが職人技でうまければ問題はない。
イラストレーターの図柄の画像も SVG になったりで、png画像を使う場面は減りそうだ。