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

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

トップページへ

WebProgrammingPortalウェブプログラミングポータル