仕様

background-clip<box>#
一括/個別個別指定プロパティ
初期値border-box
適用対象すべての要素
継承なし
百分率なし
計算値リスト、各項目は指定されたキーワード
補足<box> = border-box | padding-box | content-box

background-clip プロパティは、要素の背景の <color> または <image> を境界の下まで拡張するかどうかを設定する個別指定プロパティです。
非継承プロパティで、初期値は border-box なので、省略時は border-box が指定値となります。

値の数

  1. cdvSample910 > div { height: 6em; background-image: url(./sample16.png),url(./sample32.png),url(./sample.png); background-position: top left,top right,bottom left; background-repeat: no-repeat; padding: 1em; border: solid 1em transparent; outline: solid 1px; }
  1. <div class="cdvSample910">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。
background-image プロパティに画像が複数組み指定してある為、background-clip プロパティも同じだけ繰り返されます。

  1. background-clip: content-box, border-box;

２組 を指定しました。ボックスの背景は、CSS3で複数のレイヤーを持つことができます。レイヤーの数は、background-image プロパティのカンマ区切り値の数によって決まります。
この例示の場合は、background-image プロパティのカンマ区切り値の数は３つです。 その結果、background-clip プロパティのカンマ区切り値の数は３つ必要となります。余った分は無視され、足りない分は記述順に繰り返しで順次補足されます。
background-clip: content-box, border-box, content-box; として扱われます。

キーワード

  1. cdvSample900 > div { height: 7em; background-image: url(./sample.png); background-position: top left,top right,bottom left; background-repeat: no-repeat; padding: 1em; border: solid 1em transparent; outline: solid 1px; }
  1. <div class="cdvSample900">
  2. <div style=""></div></div>

例示の雛型です。style属性を書き換えて例示しています。

  1. background-clip: border-box;

キーワード border-box の値を指定しました。border-box は、背景は境界ボックス内にペイントされます。border-box は background-clip プロパティの初期値です。

  1. background-clip: padding-box;

キーワード padding-box の値を指定しました。padding-box は、背景はパディングボックス内にペイントされます。

  1. background-clip: content-box;

キーワード content-box の値を指定しました。content-box は、背景はコンテンツボックス内にペイントされます。

CSS全体のキーワード

値を１つのみ指定して全体に対して適用されています。１つ１つに対するキーワードとしての使用は出来ません。
個別に適用したい場合は、個別指定プロパティ(border-top-color, border-right-color, border-bottom-color, border-left-color)を使用して設定します。

  1. cdvSample940 > div { height: 3em; background-image: url(./sample.png); padding: 1em; border: solid 1em transparent; background-clip: padding-box; outline: solid 1px; }
  2. cdvSample940 > div > div { height: 3em; background-image: url(./sample.png); padding: 1em; border: solid 1em transparent; outline: solid 1px; }
  1. <div class="cdvSample940">
  2. <div><div style="">壱<br>弐<br>参<br><br><br><br><br></div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。高さの指定は、意図的に子要素を親要素からはみ出させる事により背景の色を継承しているのか透過しているのか明確化する為に記述しています。

壱
弐
参




  1. background-clip: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

壱
弐
参




  1. background-clip: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。background-clip プロパティの初期値は border-box です。

壱
弐
参




  1. background-clip: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。background-clip プロパティは非継承プロパティなので初期値の border-box を設定します。

壱
弐
参