CSS 3のbackground-sizeとbackground-break:FirefoxとSafariのCSS対応

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

インライン要素の背景画像の繰り返し方を指定するbackground-break

 background-breakは、インライン要素の背景画像の繰り返し方を指定するプロパティだ。「bounding-box」「each-box」「continuous」の3種類の繰り返し方を指定することができ、Firefoxでは-moz-background-inline-policyというプロパティ名で対応している。現在のところ、Safari 3やOperaは対応していない。

 次のソースではインライン要素を構成するに対して、上から順に-moz-background-inline-policyを「bounding-box」「each-box」「continuous」と指定している。

Firefoxの表示 Firefoxの表示
span{
background-color: #888888;
background-image: url(flower-green.png);
padding: 0.2em;
line-height: 1.5;
}

div.back01 span{
-moz-background-inline-policy: bounding-box; 
}

div.back02 span{
-moz-background-inline-policy: each-box; 
}

div.back03 span{
-moz-background-inline-policy: continuous;
}
今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。
今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。
今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。

 それぞれの値ごとの処理は次のようになっている。

background-breakプロパティの値
背景画像の繰り返し方
bounding-boxインライン要素全体に対して背景画像を繰り返し表示する
each-box行ごとに背景画像を繰り返して表示する
continuous前の行の繰り返しを引き継いで背景画像を表示する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]