CSS
CSS3

CSS3のbackground-clipプロパティって知ってた?

いや~私は知りませんでした。
背景画像の表示領域を設定する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
image.png

プロパティ値 適応範囲
border-box border領域を含む範囲(初期値)
padding-box padding領域を含む範囲
content-box padding領域も含まない、内容部分のみに表示

border領域を分かりやすくするためにかなり太目に取っていますが、モデル化するとこんな感じかな?
「コンテンツ内容」の文章と、contentの間には文字のpaddingが利いてることになりますね。

image.png

所感とか

コンテンツ内容にpadding掛けたり応用方法はいろいろありそうですね。
こんな感じとかも出来るみたいです。

image.png

参考書籍

HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集(マイナビ)』