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

背景の表示範囲を指定するbackground-clip

　HTMLやXHTMLのタグでマークアップした部分は、次のようにコンテンツ、パディング、罫線、マージンで構成される。コンテンツは文字や画像を表示する部分で、パディングはpadding、罫線はborder、マージンはmarginプロパティで調節できる部分だ。

構成図

　このうち背景が表示される範囲は、CSS 2ではコンテンツ〜パディング、CSS 2.1とCSS 3ではコンテンツ〜罫線と定義されている。この範囲を変更する方法は、CSS 2と2.1には用意されていないが、CSS 3ではbackground-clipプロパティで変更することができる。background-clipプロパティを「border」と指定するとコンテンツ〜罫線、「padding」と指定するとコンテンツ〜パディングが背景の表示範囲となる。

　たとえば、FirefoxとSafari 3で同じように背景の表示範囲を指定するには、次のように-moz-background-clipと-webkit-background-clipを指定する。ここでは、<div>の背景の表示範囲を、上は「border」、下は「padding」と指定している。

Firefoxの表示

Safari 3の表示

div	{
	background-color: black;
	border: dashed 15px green;
	padding: 30px;
	}

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

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

<div class="back01">FLOWER</div>

<div class="back02">FLOWER</div>

※ブラウザで表示を確認する

　<div>の背景は黒色で、罫線は緑色の点線で表示しているので、背景の表示範囲が「border」の場合には点線の後ろも黒い背景で表示される。一方、背景の表示範囲が「padding」の場合には、点線の後ろに背景は表示されない。

　なお、背景の表示範囲の設定は、背景色と背景画像の両方に適用される。下の画像を見て頂きたい。

flower-green.png

　たとえば、このflower-green.pngを背景画像として指定すると、次のような表示になる。

Firefoxの表示

Safari 3の表示

div	{
	background-color: black;
	background-image: url(flower-green.png);
	border: dashed 15px green;
	padding: 30px;
	}

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

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

※ブラウザで表示を確認する