Safari は複数背景画像に対応

CSS3 では実現されるであろう、background-image への複数指定。ちょっと前に Surfin’ Safari で知ったんだけど、 Safari 1.3 と 2.0 ではすでに対応しているみたい。うはー、全然知らなかったす。つうことで、実際に自分でも試してみたくて可変レイアウトのサンプルを作ってみた。もちろん、Safari でしか確認することはできない。使用した画像は、head.pngcenter.pngbottom.png の 3 つ。

背景画像を複数指定する場合、指定を記述する順番が重要になっていて、最初の指定がレイヤー的に言うと一番上に描画され、それ以降は下のレイヤーに描画されていくことになる。つまり、下に重ねて行く感じ。なんで、今回のサンプルの指定の順番も下記のようになっている。

/* 上、下、中という順番で記述 */
background-image: url(head.png), url(bottom.png), url(center.png);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: top right, bottom right, top right;

まぁ、Working Draft なんで実際はどうなるのかは分からないけど。しかし、この背景への画像の指定っていくつまで指定できるんだろうか。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/111

Comments