CSS3 Pre-Reference



background-clip

背景画像の描画領域

試す

コード

※一番上の例のみです。

#containe p {
    background-clip: border-box;
    -moz-background-clip: border-box;
    -webkit-background-clip: 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]]*
初期値 border-box
適用 すべての要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS Backgrounds and Borders Module Level 3#3.7. The ‘background-clip’ property

解説

背景の描画領域を指定します。

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

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

トラックバック

投稿されたコメント