Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

background-clip

背景の適応範囲を指定することができます。

サンプルコード
div.test { background-clip: border-box;}
div.test1 { background-clip: content-box;}
div.test2 { background-clip: padding-box;}
指定可能な値一覧
概要
border-box背景をボーダーボックス(ボーダーの外側の端まで)に適用します。これが初期値です。
content-box背景をコンテントボックス(要素の内容が表示される余白を含まない領域)に適用します。
padding-box背景をパディングボックス(パディングの外側の端まで)に適用します。
ブラウザでの表示結果
<div style="border: dashed 10px #00f; height: 100px; padding: 10px; background-color: #ff0; background-clip: border-box;">高さ100px、パディング10pxのdiv要素です。『background-clip: border-box』と指定していますので背景はボーダーの外側まで描写されます。背景色は『#ff0』、ボーダーは『dashed 10px #00f』を指定しています。</div>

<div style="border: dashed 10px #00f; height: 100px; padding: 10px; background-color: #ff0; background-clip: content-box;">高さ100px、パディング10pxのdiv要素です。『background-clip: border-box』と指定していますので背景は要素の内容が表示される余白を含まない領域まで描写されます。背景色は『#ff0』、ボーダーは『dashed 10px #00f』を指定しています。</div>

<div style="border: dashed 10px #00f; height: 100px; padding: 10px; background-color: #ff0; background-clip: padding-box;">高さ100px、パディング10pxのdiv要素です。『background-clip: border-box』と指定していますので背景はパディングの外側の端まで描写されます。背景色は『#ff0』、ボーダーは『dashed 10px #00f』を指定しています。</div>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

背景の適応範囲を指定することができます。

通常、背景はその要素のボーダーの外側まで描写されますが、『background-clip』プロパティを使用することによってコンテントボックス(要素の内容が表示される余白を含まない領域)や、パディングボックス(パディングの外側の端まで)のみに背景を表示させることができるようになります。上記のサンプルの黄色い背景が表示されている範囲をご確認下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。