いや～私は知りませんでした。
背景画像の表示領域を設定するCSSのプロパティ値です。
background-clip プロパティ
style.css
div {
background: url("bg.jpg") no-repeat center; /*背景画像*/
width: 210px;
height: 360px;
padding: 25px; /*パディング*/
border: double 20px #CCC; /*ボーダー部分を分かりやすくするため二重線に*/
}
# border-box{
background-clip: border-box;
}
# padding-box{
background-clip: padding-box;
}
# content-box{
background-clip: content-box;
}
h1{
color: #FFF;
}
表示例
確認環境：Chrome59
| プロパティ値 | 適応範囲 |
|---|---|
| border-box | border領域を含む範囲（初期値） |
| padding-box | padding領域を含む範囲 |
| content-box | padding領域も含まない、内容部分のみに表示 |
border領域を分かりやすくするためにかなり太目に取っていますが、モデル化するとこんな感じかな？
「コンテンツ内容」の文章と、contentの間には文字のpaddingが利いてることになりますね。
所感とか
コンテンツ内容にpadding掛けたり応用方法はいろいろありそうですね。
こんな感じとかも出来るみたいです。
