CSS3のbackgroundにurl()関数を複数指定できるのかー!!

CSS3って、スゴイですねー。驚きました。

backgroundプロパティって、CSS2にも出てくるので、「これは分るわー」という感じで、ついついCSS3のは飛ばし読みしてしまいますが、CSS3のbackgroundにurl()関数を複数指定できる真実[謎]を知り、驚きながらこの記事を書いています。

下記図は、そのbackgroundプロパティにurl()関数を複数指定した結果です。(デモページでは無くて図で申し訳ありません。)

上記図のCSSのソースは下記のようになっています。

#selector{
	background:url(logo.gif) no-repeat center,url(bg.jpg) no-repeat;
}

これは、何か書いている画像(bg.jpg)の上にロゴの画像(logo.gif)を重ねて表示している例です。

url()関数を「,(カンマ)」で区切って、複数指定します。

background:url() ,url();

画像の重なりの順序ですが、より前に指定した画像が上にきます。今回の場合は、logo.gifが前に指定していますので、logo.gifが一番上にきています。(と、いっても二つしか指定していないのですが・・・)