| 属性名 | background-clip |
|---|---|
| 値 | <box>[, <box>]* |
| 値の詳細 | <box> = border-box | padding-box | content-box |
| 初期値 | border-box |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 9.0 | 3.6(制限有) 4.0 | 3.0(制限有) 15 | 10.5(制限有) 11.5 | 3.1(制限有) 7 |
背景画像を表示する領域を指定します。
| 値 | 説明 |
|---|---|
| border-box | ボーダーの外側まで表示します。 |
| padding-box | パディングの外側(ボーダーの内側)まで表示します。 |
| content-box | コンテンツの外側(パディングの内側)まで表示します。 |
.test {
width: 100px;
height: 50px;
margin: 0em 1em 1em 1em;
border: 10px dashed #333333;
border: 10px solid rgba(20, 20, 20, 0.4);
background-image: url(../image/back.gif);
padding: 10px;
}
.test-border-box {
background-clip: border-box;
}
.test-padding-box {
background-clip: padding-box;
}
.test-content-box {
background-clip: content-box;
}
<h5>border-box</h5> <div class="test test-border-box">こんにちわ</div> <h5>padding-box</h5> <div class="test test-padding-box">こんにちわ</div> <h5>content-box</h5> <div class="test test-content-box">こんにちわ</div>