background-clip

概要

background-clip プロパティは、要素の背景色と背景画像の描画領域を、「ボーダーの裏側まで拡張する（デフォルト）」、「余白の領域までとする」、「コンテンツエリアのみとする」のいずれかに指定します。

構文

<box>#
where 
<box> = border-box | padding-box | content-box

値

border-box

背景の描画領域を、ボーダーの外側の端までとします。

padding-box

背景の描画領域を、パディングボックスの外側の端までとします。

content-box

背景の描画領域を、コンテンツボックスの外側の端までとします。

【訳注: コンテンツボックスとは余白の領域を含まない、要素の内容が表示される領域の事です】

例

以下の例で用いる共通のスタイル

pre {
  border: 10px navy;
  border-style: dotted double;
  background: #F8D575;
}

上記のスタイルを持つ pre 要素に対し、それぞれ別の値の background-clip を指定し、表示結果を以下に示します。

border-box

pre {
  background-clip: border-box;
}

padding-box

pre {
  background-clip: padding-box;
}

content-box

pre {
  background-clip: content-box;
}

※ここでは表示結果の部分のスタイルに、ベンダー接頭辞付きのプロパティを併記してクロスブラウザ表示を実現しています。実際にご使用になる場合はご注意下さい。

仕様

ブラウザ実装状況

[1] Gecko では バージョン 1.1 から バージョン 1.9.2（Firefox 1.0 から 3.6 に相当）でもこれらが実装されていますが、ベンダー接頭辞が必要であり、またその指定値も異なります。
-moz-background-clip: padding | border.

[2] Internet Explorer 7（※前後のバージョンは含まれない）では、 overflow: hidden | auto | scroll が指定されている場合、 background-clip:padding の様な挙動を示します。

[3] 過去のバージョンの Webkit も接頭辞付きの -webkit-background-clip をサポートしていますが、その指定値が異なります。
-webkit-background-clip: padding | border | content | text

[4] Konqueror 3.5.4 は -khtml-background-clip をサポートしています。

関連情報

• clip