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

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

複数の背景画像の設定を記述できるプロパティ

 CSS 3において、複数の背景画像の設定を記述できるプロパティは次のようになっている。

  • background-image
  • background-repeat
  • background-position
  • background-clip
  • background-origin
  • background-size

 CSS 3から追加されたbackground-clip、background-origin、background-sizeは、Safariでは-webkit-を付けて次のように利用することが可能だ。これらのプロパティについて詳しくは、前回および前々回の記事を参照してほしい。なお、ここではborderプロパティを追加して、20ピクセルの太さの罫線(点線)で全体を囲むようにしている。

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;
-webkit-background-clip: padding, border, padding, padding;
-webkit-background-origin: padding;
-webkit-background-size: auto auto, 20px 20px, auto 200%, auto auto;
border: dashed 20px navy;
width: 300px;
padding: 90px 0px;
}
ブラウザで表示を確認する

 -webkit-background-clipでは、flower-green.pngの表示範囲をborder(罫線部分)、それ以外の画像の表示範囲をpadding(パディング部分)と指定した。その結果、borderと指定した緑色の花の画像は罫線部分にも表示されるが、他の画像は表示されないことがわかる。

 -webkit-background-originでは背景画像の表示位置の基点をパディング部分に設定するため、値を「padding」と指定している。すべての背景画像を同じ値に設定する場合は、1つずつ値を指定する必要はない。

 最後に、-webkit-background-sizeでは背景画像の大きさを指定している。ここではflower-green.pngを20×20ピクセルに、white.pngの高さを200%に指定した。大きさを変更しない画像は「auto auto」と指定している。

  • コメント(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などの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]