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
これらの画像をすべて
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;
}
FLOWER
※ブラウザで表示を確認する
ここで使用した背景画像に関するプロパティは、background-image、background-repeat、background-positionの3つだ。いずれもCSS 1の時代から利用できるものだが、CSS 3では「,（カンマ）」で区切ることにより、複数の背景画像の設定を記述することができる。
background-imageプロパティで指定した背景画像は、最初に指定したものほど上に重ねて表示される。そのため、一番下に表示したいphoto.pngのURLは、一番最後に指定している。また、background-repeatとbackground-positionプロパティでは、背景画像ごとに繰り返しの方法と表示位置を指定した。
- コメント（2件）
- ホワイトペーパー
物理→VDI環境移行「3つの罠」とは
企業情報セキュリティもオラクル！
日立の新サーバに見る、日立の本気
クラウド意識調査結果を公開
データ爆発に備える"無限の可能性"
セキュリティでブランド価値を向上
百聞は一見で！日立のビッグデータ
スマートデバイスに忍び寄る危機！
