SafariのCSS 3対応--1つの要素に複数の背景画像を表示する

　前回と前々回では、CSS 3の草案CSS3 Backgrounds and Borders Moduleで追加された背景に関するプロパティを紹介したが、草案ではこの他にも新しい機能が追加されている。それが、1つの要素に複数の背景画像を表示する機能だ。

　この機能を利用すれば、これまでは1枚の背景画像として用意する必要があった絵も複数の画像を重ねて作り出すことができ、デザインの調整や素材の使い回しが容易になる。現在、この機能にはSafariが対応しているので、記述方法や表示を確認していきたい。

　また、backgroundプロパティで複数の背景画像の設定をまとめて指定する方法も紹介する。

複数の背景画像を表示する

　まずは、背景画像として表示する画像を次のように4つ用意した。flower-yellow.pngとflower-green.pngはバックを透明にして、アルファチャンネルを含めた24bitの透過PNGとして保存している。また、white.pngについては、白色から透明色のグラデーションになるようにアルファチャンネルを設定している。

flower-yellow.png

flower-green.png

white.png（グラデーションがわかりやすいように、この画像のみ背景に黒を指定しています）

photo.png

　これらの画像をすべて<div>の背景画像として指定し、表示位置や繰り返しの指定を行うと、次のように表示することができる。

Safari 3の表示

div	{
	background-image: url(flower-yellow.png), url(flower-green.png), url(white.png), url(photo.png);
	background-repeat: no-repeat, repeat-x, no-repeat, no-repeat;
	background-position: 3% 65%, 50% 85%, center center, left top;
	width: 300px;
	padding: 90px 0px;
	}

<div>FLOWER</div>

※ブラウザで表示を確認する

　ここで使用した背景画像に関するプロパティは、background-image、background-repeat、background-positionの3つだ。いずれもCSS 1の時代から利用できるものだが、CSS 3では「,（カンマ）」で区切ることにより、複数の背景画像の設定を記述することができる。

　background-imageプロパティで指定した背景画像は、最初に指定したものほど上に重ねて表示される。そのため、一番下に表示したいphoto.pngのURLは、一番最後に指定している。また、background-repeatとbackground-positionプロパティでは、背景画像ごとに繰り返しの方法と表示位置を指定した。