ホームページで背景色がある箇所に綺麗に透過ロゴを表示させる
ロゴ表示などで、背景色と透過イメージファイルの組み合わせると境界が気になります。
この解決方法は、透過イメージファイルをsvg(Scalable Vector Graphics)ファイルにすることです。
ロゴをIllastratorで作成している場合は簡単にavgフォーマットが書き出せます。
事例:https://www.ecnac.jp/
このウェブサイトの左上のロゴが事例です。
青背景がグラデーションで、そこに赤色のロゴをラスター画像の透過イメージ(pngやgif等)を重ねると、背景色とロゴイメージの境界が見苦しくなります。
さらに、このサイトはレスポンシブになっており、ロゴの大きさが可変になっています。
この様な場合にはsvgフォーマットのロゴ画像を配置すると、境界も綺麗で大きさが可変でも綺麗に表示されます。
最近のコメント