« 長らくFirefoxでちゅんラヂの動作が不調 | トップページ | FM桐生のとある番組をタイムシフトにて聴く »

ホームページで背景色がある箇所に綺麗に透過ロゴを表示させる

ロゴ表示などで、背景色と透過イメージファイルの組み合わせると境界が気になります。
この解決方法は、透過イメージファイルをsvg(Scalable Vector Graphics)ファイルにすることです。
ロゴをIllastratorで作成している場合は簡単にavgフォーマットが書き出せます。

事例:https://www.ecnac.jp/
このウェブサイトの左上のロゴが事例です。
青背景がグラデーションで、そこに赤色のロゴをラスター画像の透過イメージ(pngやgif等)を重ねると、背景色とロゴイメージの境界が見苦しくなります。
さらに、このサイトはレスポンシブになっており、ロゴの大きさが可変になっています。
この様な場合にはsvgフォーマットのロゴ画像を配置すると、境界も綺麗で大きさが可変でも綺麗に表示されます。

|

« 長らくFirefoxでちゅんラヂの動作が不調 | トップページ | FM桐生のとある番組をタイムシフトにて聴く »

今日のHTML Tips.」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




« 長らくFirefoxでちゅんラヂの動作が不調 | トップページ | FM桐生のとある番組をタイムシフトにて聴く »