【CSS】background-clip - 背景画像の表示範囲
CSSのbackground-clipプロパティについてご紹介します。
background-clip
background-clipは背景画像の表示範囲を示すプロパティです。
基本構文
background-clip: 値;値
一般的な値は次の通りです。
| 値 | 意味 |
|---|---|
| border-box | 境界ボックスまで表示 |
| padding-box | パディングボックスまで表示 |
| content-box | コンテンツボックスまで表示 |
サンプル
border-box
<style>
div {
font-size: 36px;
border: 10px dashed black;
padding: 30px;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-size: cover;
background-clip: border-box;
}
</style>
<div>TEXT</div>padding-box
<style>
div {
font-size: 36px;
border: 10px dashed black;
padding: 30px;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-size: cover;
background-clip: padding-box;
}
</style>
<div>TEXT</div>content-box
<style>
div {
font-size: 36px;
border: 10px dashed black;
padding: 30px;
background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
background-size: cover;
background-clip: content-box;
}
</style>
<div>TEXT</div>
