CSSで画像の上に背景画像を乗っける方法。
Category:Web
タイトル通りのことなんですが、CSSを使って画像の上に背景用画像を表示するやり方を紹介します。
画像の上に背景画像を乗っけたら、画像が見えなくなるだろ。ってのはなしで、サンプルを見てもらえば分かるかと思いますが、アレですこのブログの右側にあるiTunesとかオートバックスとかのバナーの装飾にも使ってる方法です。
まぁ、正直需要は少ないと思いますが…。
こんな方法もありますよ的な感じで(・∀・)つ
ここから続き
やり方は至ってシンプル。コツ(？)はpositionとz-index。
むしろW3Cに準拠するためにシンプルにしなくちゃみたいな。空の<span>とかは使いたくないんで。
とりあえずサンプル。
CSSで画像の上に背景画像を乗っける方法のサンプルページ。
今回の検証には『WindowsのInternet Explorer 8と7と6』『WindowsのFirefox 3』『WindowsのOpera9.6』『WindowsのSafari3.1』『WindowsのGoogle Chrome1.0』を使用しております。 例のごとくMacは無いので検証しておりません。あしからず。
ついでに、IEの8と6は『IETester』を使用しております。
で、簡単に説明すると<img>を<a>で囲んでその<a>に背景画像を指定し、z-indexを使って<img>を<a>の下に持ってくると。
CSS側のliとaの「width」と「height」、imgの「top」「left」は使用する画像の大きさ、背景画像の大きさによって変更。
ちなみに、実際には背景画像にPNG画像を使用してる関係上IE6用にCSSの記述が多いですが、背景画像にGIFを使えば必要ないのでサンプルのソースでは省いてます。
(↑この方法は『ヨモツネット』さんの方法を使用しております。ありがとうございます。)
とまぁ、こんな感じで。
おっと、もしかしたら画像ギャラリーのサムネールの装飾とかに使えないかな？
とりあえず、なんか、こぉ、変なトコにこだわりたい方はぜひ(・∀・)つ
ココでまったく関係ない話なんですが、最近あったかくなってきたんで先日久々に手洗いの洗車をしました∩(・∀・)∩
しかも今回はブリスを使用。
ただ洗車キズとか小さなキズは消えないんで、先にコンパウンドとかでキズ消せばよかったかなぁ～と後悔。
でもワックスの手間を考えれば十分だと思います。
レガシィもテカテカになりましたし。
この記事についてるタグ
タグはありません。
関連記事
Sponsored Links
Comment : 11
Track Back : 0
- この記事のトラックバックURL
- http://webruary.blog37.fc2.com/tb.php/44-3bdbb986
t.tURL 2009-05-10 (日) 10:57
遭遇！パチ屋で萬発見！？
chobirURL 2009-05-11 (月) 09:36
大将より先にt.tだと!?
ってか、萬てwww
usuproURL 2009-05-11 (月) 16:26
ipが他県だったりする。
chobirURL 2009-05-11 (月) 22:08
あれ…？M県？
しかもMac OSX10のSafariってt.tじゃありえないな。
usuproURL 2009-05-13 (水) 10:22
いや、ガチでこれはt.tが書いてる。パソコン貸しただけ。
chobirURL 2009-05-14 (木) 12:09
なるほどね。
あれ？大将はまだぁ？
usuproURL 2009-05-14 (木) 17:15
なんかね聞いたらサイトのアドレスわかんねえとか言ってた。
だから目立つところで誘導しとくわ。
chobirURL 2009-05-14 (木) 23:02
http://usupro.blog.shinobi.jp/Entry/37/
モロ無修正じゃないか。
usuproURL 2009-05-15 (金) 10:39
ある意味出会ひ系。丸見えで無修正！ぼかし一切無しでお送りしております。
usuproURL 2009-05-22 (金) 12:08
http://usupro.blog.shinobi.jp/Entry/37/
このアドレスを大将に送りつけたんだが一向に返事なし。あかんわ。
chobirURL 2009-05-23 (土) 00:02
せつねぇ…。
今度あったときに直談判でもしとくかな。
一言くださいと。