今回は、このバナーを題材に、透明画像の背景に色をつける方法。

バナーの場所は「あげはコーナー | パート派遣主婦のぐーたら子育て生活」です。

記事中に登場する、text-alignとmarginについての詳しい説明は、下の参考記事をご覧ください。

text-align

背景色を気にしないなら、画像の配置はtext-alignで出来ます。

透過画像の背景色

今回のバナーは、背景が白く見えていますが、文字、枠、イラスト以外の部分は透明です。
ですから、白以外の背景の場所に置けばその色で見えます。

ということは、画像を入れているpタグの背景色を指定すればいいと思われます。やってみます。

バナーの左右にまで色がついてしまいました。
原因は画像の横幅よりもpタグのエリアの横幅の方が広いからです。

この記事で使っているバナーの横幅は２２０ピクセルです。
そこで、pタグのエリアの横幅も２２０ピクセルに指定します。

色は横幅にピッタリ収まりましたが、中央合わせにならなくなりました。

text-alignはその枠の中での位置指定です。横幅２２０ピクセルの場所に２２０ピクセルの画像を置けばピッタリなので、右寄せも左寄せも中央合わせもできません。寄せるための余った部分がないからです。

しかし、pタグの外に横幅２２０ピクセルの余り部分があります。
そこで、text-alignではなくmarginを使います。

マウスが乗ったときに色を変える

リンクのためのバナーなら、マウスが乗った時に色が変わった方がわかりやすいでしょう。
hoverを使って実現します。

マウスが乗った時だけ色を変える
<style type="text/css">
p.sample{
  margin:0 auto;
  background:#fef;
  width:220px;
}
p.sample:hover{
  background:#ffe;
}
p.sample a,p.sample a:hover{
  background:transparent;
}
</style>

<p class="sample"><a href="https://fanblogs.jp/ayzfqir5/archive/443/0"><img src="https://fanblogs.jp/ayzfqir5/file/442/YWdlaGH35g.gif"/></a></p>