CSS3: background-clip プロパティ - 背景の適用範囲の指定

■ 概要

項  目説  明
記述形式 セレクタ {background-clip: }
値 の形式 border-boxpadding-boxcontent-box
初 期 値 border-box
対応ブラウザー C3+ / e9+ / N?+ / Fx4+ / Op10.5+ / Ch3+ / Sa3+
適用可能な要素 すべての要素
継  承 しない

■ 解説

background-clipプロパティ は,背景の適用範囲 を指定します。 半角カンマ( , )で区切って複数の値を指定することもできます。

指定できる値の形式は,以下のとおりです。

説  明
border-box 要素の 境界ボックス の内部だけ背景が表示されます。
padding-box 要素の パディングボックス の内部だけ背景が表示されます。
content-box 要素の コンテンツボックス の内部だけ背景が表示されます。
備  考 境界パディングコンテンツ の順に内側の領域になって行きます。

なお,ルート要素(html要素)は異なる背景の描画領域をもつため,background-clipプロパティ による指定は無効です。

また,要素が境界をもつ場合には,背景は常に 境界の背後に描がかれます。

■ 使用例( background-clip プロパティの利用)

次の例のような,背景色の塗りつぶしの場合では,背景は境界線より奥に描かれますので,通常, 境界ボックスパディングボックス の指定の違いはあまり意識することはありませんが,境界線の色を transparent にしてみると, 背景の表示範囲が違うことがわかります。

HTMLソース
CSS
<head> ~ </head>
   div.sample1 { width: 30%; padding: 2em;
                 border: solid 1.5em transparent;
                 background: yellow;
                 background-clip: border-box; }
   div.sample2 { width: 30%; padding: 2em;
                 border: solid 1.5em transparent;
                 background: yellow;
                 background-clip: padding-box; }
   div.sample3 { width: 30%; padding: 2em;
                 border: solid 1.5em #99CC99;
                 background: yellow;
                 background-clip: content-box; }
HTML
<body> ~ </body>
<div class="sample1">
   ああああああああああああああ
   <br>ああああああああああああああ
   <br>ああああああああああああああ
</div>
<br>
<div class="sample2">
   ああああああああああああああ
   <br>ああああああああああああああ
   <br>ああああああああああああああ
</div>
<br>
<div class="sample3">
   ああああああああああああああ
   <br>ああああああああああああああ
   <br>ああああああああああああああ
</div>

ブラウザー 表示例
 ↓↓↓background-clip: border-box; (境界線領域を含めて背景が表示されます)
ああああああああああああああ
ああああああああああああああ
ああああああああああああああ

 ↓↓↓background-clip: padding-box; (境界線領域を除いて背景が表示されます)
ああああああああああああああ
ああああああああああああああ
ああああああああああああああ

 ↓↓↓background-clip: content-box; (境界線領域と padding領域を除いて背景が表示されます)
ああああああああああああああ
ああああああああああああああ
ああああああああああああああ

■ 備考

【参考ページ】