CSS3 複数background指定
2010.12.23
この記事は最終更新日から1年以上が経過しています。
css3では、複数のbackground指定が可能になっております。
今回は3枚の画像を用意して指定する方法です。
まず、画像ですが、
背景
ハート、星
の3枚を用意します。
<div id="test"></div>
div#testにbackground指定
#test{ width:480px; height:600px; background: url(Heart.png), url(Star.png), url(bg.jpg); }
,で区切り、パスの指定。この時、後でパス指定されているファイルが、
下のレイヤーに表示されます。
先にパスを記述する程、レイヤーの優先度が高いということです。
その他のリピート指定、ポジション指定もまとめて、
#test{ width:480px; height:600px; background: url(Heart.png), url(Star.png), url(bg.jpg); background-repeat: repeat-x, repeat-y,no-repeat; background-position:center,0 10px,left top; }