• web制作

【CSS3】背景画像を重ねて表示

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

背景画像の重ね方

一番下に敷きたいと考えている幅500px、高さ300pxの車の画像。
bg01
そして、上に重ねたい画像が2つ
両方とも幅200px、高さ150px。
bg02
bg03
これらを重ねて表示したい場合

<!-- HTML -->
<div class="box">
<!-- 背景に画像を表示させたい場所 -->
</div>
/* CSS */
.box{
	width: 500px;
    height: 300px;
	background:
	url(bg02.png)no-repeat top right , /*イクラ、top&rightで右上に配置*/
	url(bg03.png)no-repeat bottom right , /*カバ、bottom&rightで右下に配置*/
	url(bg01.png)no-repeat;/*一番下の車の画像を一番下に書く*/
}

と書くと・・・
bg04
こうなるそうです。
background:の後に『,』を入れれば同じ場所にいくらでも画像を重ねることができるそうです。

枠も作れる

<!-- HTML -->
<div class="box2">
<p>
神龜雖壽。猶有竟時。騰蛇成霧。終為土灰。老驥伏櫪。志在千里。 
烈士暮年。壯心不已。盈縮之期。不獨在天。養怡之福。可得永年。 
幸甚至哉。歌以詠志。

霊亀は長寿なれども必ず死し、竜は霧と共に現れるも、終には土灰どはいに帰するのみ。 
老いたる駿馬は馬屋に伏すも、その志は千里を馳す。 
烈士もまた年を経て、その壮心は已むことなし。 
時節の満ち欠けは、独り天に在らず、心に喜神を含めば遂には長久せざるなし。 
幸いなるの至りというべし。 
志を歌にして詠ぜん。
</p>
</div>
/* CSS */
.box2{
	width: 400px;
	background:
	url(top.png)no-repeat top,
	url(bottom.png)no-repeat bottom,
	url(middle.png)repeat-y top;
}
.box2 p{
	width: 300px;
	margin:0 auto;
	padding:20px 0;
}

枠の上部の画像と↓
top2
下部の画像↓
bottom2
そして間を繋ぐ高さ1pxの画像を用意して↓
middle2

url(top.png)no-repeat top,/*上部の画像*/
url(bottom.png)no-repeat bottom,/*下部の画像*/
url(middle.png)repeat-y top;/*繋ぎの画像 y方向に繰り返し表示*/

この順番で並べて、繋ぎの画像のみrepeat-yを設定すれば、中身の文章がいくら長くなっても枠を作り続けることができます。
領域のキャプチャ 1
ただ、これは画像の背景を透過させると使えないので注意です。
透過画像ver
領域のキャプチャ 4
つまり基本は使えないということですね。

 

絵画「争う女」
ふ…ふざけるなよ…!
戦争だろうが…
疑っているうちはまだしも
それを口にしたら…
戦争だろうがっ…!
戦争じゃねえのかよっ…!

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