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

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

複数の背景画像に関する設定をまとめて指定する

 複数の背景画像に関する設定は、backgroundプロパティでまとめて指定することができる。backgroundはCSS 1の時代から利用できたプロパティの1つで、CSS 3では複数の背景画像の設定を「,(カンマ)」で区切って指定することが可能だ。

 先ほどのソースの場合、次のように設定をまとめて記述することができる。このとき、background-originの値は、background-clipの値に続けて記述しなければならない。

Safari 3の表示 Safari 3の表示
div{
background: 
url(flower-yellow.png) no-repeat 3% 65% padding padding, 
url(flower-green.png) repeat-x 50% 85% border padding, 
url(white.png) no-repeat center center padding padding, 
url(photo.png) no-repeat left top padding padding;
-webkit-background-size: auto auto, 20px 20px, auto 200%, auto auto;

border: dashed 20px navy;
width: 300px;
padding: 90px 0px;
}
ブラウザで表示を確認する

 -webkit-background-sizeの設定をbackground内に記述しなかったのは、現在のところSafari 3では記述に対応していないためだ。CSS 3の草案では、次のようにbackground-sizeの設定を ( ) で囲んで記述できることになっている。

div{
background: 
url(flower-yellow.png) no-repeat 3% 65% border padding (auto auto), 
url(flower-green.png) repeat-x 50% 85% border padding (20px 20px), 
url(white.png) no-repeat center center padding padding (auto 200%), 
url(photo.png) no-repeat left top padding padding (auto auto);

border: dashed 20px navy;
width: 300px;
padding: 90px 0px;
}
  • コメント(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などの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]