webruaryと黒猫のウィズ

webruaryの記事一覧 webruaryのRSS

通常のブログ。http://webruary.net/


スポンサーサイト

Category:スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加

Sponsored Links

Comment : -

  1. t.tURL 2009-05-10 (日) 10:57

    遭遇!パチ屋で萬発見!?

  2. chobirURL 2009-05-11 (月) 09:36

    大将より先にt.tだと!?
    ってか、萬てwww

  3. usuproURL 2009-05-11 (月) 16:26

    ipが他県だったりする。

  4. chobirURL 2009-05-11 (月) 22:08

    あれ…?M県?
    しかもMac OSX10のSafariってt.tじゃありえないな。

  5. usuproURL 2009-05-13 (水) 10:22

    いや、ガチでこれはt.tが書いてる。パソコン貸しただけ。

  6. chobirURL 2009-05-14 (木) 12:09

    なるほどね。
    あれ?大将はまだぁ?

  7. usuproURL 2009-05-14 (木) 17:15

    なんかね聞いたらサイトのアドレスわかんねえとか言ってた。

    だから目立つところで誘導しとくわ。

  8. chobirURL 2009-05-14 (木) 23:02

    http://usupro.blog.shinobi.jp/Entry/37/
    モロ無修正じゃないか。

  9. usuproURL 2009-05-15 (金) 10:39

    ある意味出会ひ系。丸見えで無修正!ぼかし一切無しでお送りしております。

  10. usuproURL 2009-05-22 (金) 12:08

    http://usupro.blog.shinobi.jp/Entry/37/

    このアドレスを大将に送りつけたんだが一向に返事なし。あかんわ。

  11. chobirURL 2009-05-23 (土) 00:02

    せつねぇ…。
    今度あったときに直談判でもしとくかな。
    一言くださいと。

Comment Form

Track Back : -

この記事のトラックバックURL
http://webruary.blog37.fc2.com/tb.php/44-3bdbb986

トラックバック一覧

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を使えば必要ないのでサンプルのソースでは省いてます。
(↑この方法は『ヨモツネット』さんの方法を使用しております。ありがとうございます。)

とまぁ、こんな感じで。

おっと、もしかしたら画像ギャラリーのサムネールの装飾とかに使えないかな?
とりあえず、なんか、こぉ、変なトコにこだわりたい方はぜひ(・∀・)つ

ココでまったく関係ない話なんですが、最近あったかくなってきたんで先日久々に手洗いの洗車をしました∩(・∀・)∩
しかも今回はブリスiconを使用。

ただ洗車キズとか小さなキズは消えないんで、先にコンパウンドとかでキズ消せばよかったかなぁ~と後悔。

でもワックスの手間を考えれば十分だと思います。
レガシィもテカテカになりましたし。

このエントリーをはてなブックマークに追加

Sponsored Links

Comment : 11

  1. t.tURL 2009-05-10 (日) 10:57

    遭遇!パチ屋で萬発見!?

  2. chobirURL 2009-05-11 (月) 09:36

    大将より先にt.tだと!?
    ってか、萬てwww

  3. usuproURL 2009-05-11 (月) 16:26

    ipが他県だったりする。

  4. chobirURL 2009-05-11 (月) 22:08

    あれ…?M県?
    しかもMac OSX10のSafariってt.tじゃありえないな。

  5. usuproURL 2009-05-13 (水) 10:22

    いや、ガチでこれはt.tが書いてる。パソコン貸しただけ。

  6. chobirURL 2009-05-14 (木) 12:09

    なるほどね。
    あれ?大将はまだぁ?

  7. usuproURL 2009-05-14 (木) 17:15

    なんかね聞いたらサイトのアドレスわかんねえとか言ってた。

    だから目立つところで誘導しとくわ。

  8. chobirURL 2009-05-14 (木) 23:02

    http://usupro.blog.shinobi.jp/Entry/37/
    モロ無修正じゃないか。

  9. usuproURL 2009-05-15 (金) 10:39

    ある意味出会ひ系。丸見えで無修正!ぼかし一切無しでお送りしております。

  10. usuproURL 2009-05-22 (金) 12:08

    http://usupro.blog.shinobi.jp/Entry/37/

    このアドレスを大将に送りつけたんだが一向に返事なし。あかんわ。

  11. chobirURL 2009-05-23 (土) 00:02

    せつねぇ…。
    今度あったときに直談判でもしとくかな。
    一言くださいと。

Comment Form

Track Back : 0

この記事のトラックバックURL
http://webruary.blog37.fc2.com/tb.php/44-3bdbb986

トラックバック一覧

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。