WebCreator Note

CSS3で一つのCSSに背景画像を複数設定する

2012.01.19(木)CSS, CSS3

CSS3から一つのCSSに背景画像を複数設定することが可能になりました。
今までのようにタグを入れ子して表示せずによりシンプルなHTMLでコードを組むことができるようになります。

【2つの画像を重ねて表示】

この2つの画像を重ねます。
どちらも透過PNG画像です。

WebCreator Note WebCreator Note

HTML

<div class="css">
  2つの画像を重ねて表示
</div>

CSS

.css {
	background-image: url(../images/sample01.png), url(../images/sample02.png);
	background-repeat: repeat;
	
	text-align:center;
	line-height: 300px;
	width: 300px;
	height: 300px;
}

画像を『,』で区切ります。
先に書いた方が上に表示されます。

2つの画像を重ねて表示
【背景画像を使用した可変可能な枠】

縦横共に可変可能な、背景画像を使用した枠の設定です。

HTML

<div class="css">
  背景画像を使用した枠
</div>

CSS

.css {
	background-image: url(../images/clover.gif),
					  url(../images/diamonds.gif),
					  url(../images/hart.gif),
					  url(../images/spades.gif),
					  url(../images/top.gif),
					  url(../images/right.gif),
					  url(../images/bottom.gif),
					  url(../images/left.gif);
	background-repeat: no-repeat,
					   no-repeat,
					   no-repeat,
					   no-repeat,
					   repeat-x,
					   repeat-y,
					   repeat-x,
					   repeat-y;
	background-position: top left,
						 top right,
						 bottom left,
						 bottom right,
						 top right,
						 top right,
						 bottom left,
						 top left;
	
	text-align:center;
	line-height: 300px;
	width: 300px;
	height: 300px;
}

画像を『,』で区切ります。
ボジションは『px』や『%』などでも指定可能です。

背景画像を使用した枠

facebookコメント

コメントする

facebook

カテゴリー

新着記事

スペシャルリンク

関連リンク

アーカイブ

Copyright (C) WebCreator Note. ALL RIGHTS RESERVED.

p5rn7vb