Posted at

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

More than 1 year has passed since last update.

いや~私は知りませんでした。

背景画像の表示領域を設定する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 対策テキスト&問題集(マイナビ)』