属性名 | 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>