CSS3 Pre-Reference



background-origin

背景画像の描画基準

試す

コード

※一番上の例のみです。

#containe p {
    background-origin: border-box;
    -moz-background-origin: border-box;
    -webkit-background-origin: border-box;
}

サンプル

書いてある描画方法で描画されていれば対応しています。分かりやすいように、背景の繰り返しは無しにしています。

border-box(ボーダー外線まで背景を表示)

padding-box(パディング外線まで背景を表示)

content-box(内容枠まで背景を表示)

コメントする


対応ブラウザ

Firefox
1.0~
Chrome/Safari
3.0~
Opera
10.5~
InternetExplorer
9

パラメータ

[border-box | padding-box | content-box][, [border-box | padding-box | content-box]]*
初期値 padding-box
適用 すべての要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS Backgrounds and Borders Module Level 3#3.8. The ‘background-origin’ property

解説

背景の描画基準を指定します。0pxを指定した場合にボーダーのラインを起点にするのか、100%を指定した場合にパディングの端を示すのか、です。

border-box
背景はボーダーボックスの範囲を基準として描画されます。
padding-box
背景はパディングボックスの範囲を基準として描画されます。
content-box
背景は内容ボックスの範囲を基準として描画されます。

Firefoxについては、1.0~3.6までは”-moz-background-origin”というプロパティになっています。また、Safari/Chromeについても、”-webkit-background-origin”というプロパティになっています。

トラックバック

投稿されたコメント