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

エ・ビスコム・テック・ラボ
2008-03-18 08:00:00
  • このエントリーをはてなブックマークに追加

 前回前々回では、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-yellow.png
flower-green.png flower-green.png
white.png white.png(グラデーションがわかりやすいように、この画像のみ背景に黒を指定しています)
photo.png photo.png

 これらの画像をすべて

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

Safari 3の表示 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プロパティでは、背景画像ごとに繰り返しの方法と表示位置を指定した。

  • コメント(3件)
#1 Cee   2008-03-18 10:59:29
とても面白いです。新しい記事も楽しみにしています。
#2 まや   2012-02-10 11:55:39
たすかりました~。
#3 通行人   2012-06-18 04:36:44
為になる記事ですが、広告の表示方法にストレスを感じますよ。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]