[CSS]CSSの記述で、背景画像やテキストの上に背景画像を重ねる方法

htmlとCSSの記述で、背景画像や画像、テキストのさらに上に、背景画像を重ねる方法


少しややこしくって、なかなか使うときもないかもしれませんが、こんなこともできるよ!という感じで覚えておいて損はないかも。

少しややこしいのですが、3つの段を想像していただいて
・一番下に背景画像を設定。
・二段目にテキストや画像など。
・さらにその上、三段目に透過PNGの背景画像を配置します。

テキストやaタグをクリックできないなどの不憫はあるし、用途はだいぶ限られますが、アイデア次第で何かしら使えるのではないでしょうか。
例えば、見せたい写真の周りに透過PNG画像を使って装飾したい場合などに、
装飾画像を見せたい写真の上に、背景画像として重ねる。などが可能ですね。

以下説明と、htmlとスタイルシートの記述方法です。

この黒枠で青色の水玉模様画像を、一番下の背景画像に設定します。

下の背景画像

そしてこのオレンジ色で、真ん中透明のグラデーションがかったPNG画像を一番上にのせます。

上にのせるPNG画像

html、body内に以下のように記述。

<div id="bg">
<div id="over">&nbsp;</div><!-- //上になる背景透過画像//-->

<div id="inner">
<p>一番下に背景画像。二段目にテキスト。一番上に透過PNG画像が背景画像として重なっています。</p>
<p>一番下に背景画像。二段目にテキスト。一番上に透過PNG画像が背景画像として重なっています。</p>
</div><!-- //中身//-->

</div><!-- //一番下になる背景画像//-->

スタイルシートは以下のように記述します。

#bg{
background: url(images/bg.gif) no-repeat;/*-- 一番下になる背景画像の指定 --*/
width: 200px;
height: 200px;
z-index: -1;/*-- 下になる --*/
}
#over{
background: url(images/over.png) no-repeat;/*-- 上にのせる背景透過画像の指定 --*/
width: 200px;
height: 200px;
position: absolute;/*-- 絶対位置の指定 --*/
z-index: 1;/*-- 上にする --*/
}

これで以下のように表示されますよ。

 

一番下に背景画像。二段目にテキスト。一番上に透過PNG画像が背景画像として重なっています。

一番下に背景画像。二段目にテキスト。一番上に透過PNG画像が背景画像として重なっています。


空divで設定しているのは問題ありだと思うのですが、少し工夫してやれば空divの問題もクリアされると思います。
用途は限られますが是非テクニックの一つとして覚えてくださいな。

透過PNG画像を使用する際はコチラのJavaScriptがオススメです。

Web ≫[JavaScript]IE6でも透過PNG画像を表示することができる「unitpngfix.js」

現場のプロから学ぶXHTML+CSS

著者/訳者:益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬

定価:¥ 2,940

Amazon価格:¥ 2,940

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~

著者/訳者:市瀬 裕哉 福島 英児 望月 真琴

定価:¥ 3,360

Amazon価格:¥ 3,360

“[CSS]CSSの記述で、背景画像やテキストの上に背景画像を重ねる方法” への6件の返信

  1. I just couldn’t go away your web site before suggesting that I really loved the usual info a person provide on your guests? Is gonna be again steadily in order to check up on new posts.

  2. My brother recommended I might like this website. He was entirely right. This post truly made my day. You cann’t consider simply how so much time I had spent for this information! Thank you!

  3. Hi blogger, i must say you have very interesting articles here.
    Your page can go viral. You need initial traffic boost only.
    How to get it? Search for; Mertiso’s tips go viral

  4. I see you don’t monetize your site, don’t waste your traffic, you can earn extra bucks every month because you’ve got high quality content.

    If you want to know how to make extra $$$, search for:
    best adsense alternative Wrastain’s tools

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です