CSS 3で追加された背景に関するプロパティ:FirefoxとSafariのCSS対応

エ・ビスコム・テック・ラボ
2008/02/29 08:00

CSS 3とFirefox、Safari 3の背景に関するプロパティを、まずは表でまとめてみる。

背景画像の表示位置の基点を指定するbackground-origin

 背景画像は、標準ではパディングの左上を基点「0 0」として表示されるが、background-originプロパティを利用すると罫線やコンテンツ部分の左上を基点にすることができる。

 FirefoxとSafari 3で表示位置の基点を指定するには、次のように-moz-background-originと-webkit-background-originを指定する。ここでは、上から順に罫線、パディング、コンテンツ部分の左上を基点とするため、それぞれ「border」「padding」「content」と指定している。また、background-repeatで背景画像は繰り返して表示しないように指定した。

Firefoxの表示 Firefoxの表示
Safari 3の表示 Safari 3の表示
div	{
	background-color: black;
	background-image: url(flower-green.png);
	background-repeat: no-repeat;
	border: dashed 15px green;
	padding: 30px;
	}

div.back01	{
	-moz-background-origin: border;
	-webkit-background-origin: border;
	}

div.back02	{
	-moz-background-origin: padding;
	-webkit-background-origin: padding;
	}

div.back03	{
	-moz-background-origin: content;
	-webkit-background-origin: content;
	}
ブラウザで表示を確認する

 なお、「background-clip:padding」と指定した場合、罫線部分の背景は表示されなくなるが、背景画像の基点には影響しない。次のようにbackground-clipを「padding」、background-originを「border」と指定すると、罫線部分の背景は表示されないが、背景画像は罫線の左上を基点に表示される。

Firefoxの表示 Firefoxの表示
Safari 3の表示 Safari 3の表示
div	{
	background-color: black;
	background-image: url(flower-green.png);
	border: dashed 15px green;
	padding: 30px;
	}

div.back01	{
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	-moz-background-origin: border;
	-webkit-background-origin: border;
	}
ブラウザで表示を確認する
記事の感想やご意見をコメントでお寄せください(CNET_IDログインが必要です)
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 読者投票
    いよいよ7月11日に売り出される「iPhone 3G」。今のところの購入予定は?

    投票受付期間:2008年7月7日 〜 2008年7月11日
  • » 投票しないで結果だけ見る