<style type="text/css">
#d_backgroundclip {
margin:0 auto;
width:320px;
color:#85bfa7;
text-align:center;
font-weight:bold;
}
#d_backgroundclip div {
background-color:#000;
background-image:url(/content/img/pattern.jpg);
background-repeat:repeat;
border:5px dotted #85bfa7;
margin:10px 0; padding:30px;
}
#d_backgroundclip div.border {
background-clip:border-box;
}
#d_backgroundclip div.padding {
background-clip:padding-box;
}
#d_backgroundclip div.content {
background-clip:content-box;
}
#d_backgroundclip div.text {
background-clip:text;
-webkit-background-clip:text; /* これなしだとChrome,Safariで適用されません */
}
</style>
<div id="d_backgroundclip">
<div class="border">background-clip:border</div>
<div class="padding">background-clip:padding</div>
<div class="content">background-clip:content</div>
<div class="text">background-clip:text</div>
</div>