{{CSSRef}}
概要
background-clip プロパティは、要素の背景色と背景画像の描画領域を、「ボーダーの裏側まで拡張する(デフォルト)」、「余白の領域までとする」、「コンテンツエリアのみとする」のいずれかに指定します。
{{cssinfo}}
構文
{{csssyntax}}
値
- 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; }
※ここでは表示結果の部分のスタイルに、ベンダー接頭辞付きのプロパティを併記してクロスブラウザ表示を実現しています。実際にご使用になる場合はご注意下さい。
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Backgrounds and Borders Module Level 3 | {{Spec2('CSS3 Backgrounds')}} |
ブラウザ実装状況
{{CompatibilityTable()}}
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基本サポート | 1.0 [3] | {{CompatGeckoDesktop("2.0")}} [1] | 9.0 [2] | 10.5 | 3.0 (522) [3] |
content-box |
1.0 [3] | {{CompatGeckoDesktop("2.0")}} [1] | 9.0 [2] | {{CompatNo()}} | 3.0 (522) [3] |
機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
content-box |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
[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
をサポートしています。
関連情報
- {{cssxref("clip")}}