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

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

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

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

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

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

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

そしてこのオレンジ色で、真ん中透明のグラデーションがかった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;/*-- 上にする --*/
}

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

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

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

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