CSS
.test {
width: 100px;
height: 50px;
margin: .5rem;
border: 10px dashed #333333;
border: 10px solid rgba(20, 20, 20, 0.4);
background-image: url(../image/back.gif);
padding: 10px;
font-size: 32pt;
font-weight: bold;
}
.test-border-box {
background-clip: border-box;
}
.test-padding-box {
background-clip: padding-box;
}
.test-content-box {
background-clip: content-box;
}
.test-text {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
HTML
<h5>border-box</h5>
<div class="test test-border-box">ABC</div>
<h5>padding-box</h5>
<div class="test test-padding-box">ABC</div>
<h5>content-box</h5>
<div class="test test-content-box">ABC</div>
<h5>text</h5>
<div class="test test-text">ABC</div>
表示
border-box
ABC
padding-box
ABC
content-box
ABC
text
ABC