項 目 | 説 明 |
---|---|
記述形式 | セレクタ {background-clip: 値 } |
値 の形式 | border-box,padding-box,content-box |
初 期 値 | border-box |
対応ブラウザー | C3+ / e9+ / N?+ / Fx4+ / Op10.5+ / Ch3+ / Sa3+ |
適用可能な要素 | すべての要素 |
継 承 | しない |
background-clipプロパティ は,背景の適用範囲 を指定します。 半角カンマ( , )で区切って複数の値を指定することもできます。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
border-box | 要素の 境界ボックス の内部だけ背景が表示されます。 |
padding-box | 要素の パディングボックス の内部だけ背景が表示されます。 |
content-box | 要素の コンテンツボックス の内部だけ背景が表示されます。 |
備 考 | 境界,パディング,コンテンツ の順に内側の領域になって行きます。 |
なお,ルート要素(html要素)は異なる背景の描画領域をもつため,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領域を除いて背景が表示されます)
ああああああああああああああ
ああああああああああああああ ああああああああああああああ |