CSS 테두리 이미지 및 배경 이미지 마스킹

Question

jsfidle-example에서 내 예를 확인하십시오. 외부 경계 이미지가 모양을 가지고 있으며, 이미지가 내부 정사각형

내가 테두리 이미지 내부에 이미지가

<div class="border background" style="width:200px; height:200px"> </div> 
.border 
{ 
    border-style: solid; 
    border-width: 17px 7px 5px 10px; 
    -o-border-image:url(image1) 17 7 5 10 repeat; 
    -moz-border-image: url(image1) 17 7 5 10 repeat; 
    border-image: url(image1) 17 7 5 10 fill repeat; 

} 
.background 
{ 
    content: url(image2); 
} 

,

나는 이미지가 전체 국경을 채우려 (내부 이미지 마스킹과 같은) 테두리 이미지의

어떻게하면됩니까?

Answer 1

너는 이런 식으로보고 있니? 유래에

<div class="border" style="width:200px; height:200px"> 
    <div class="background" style="width:204px; height:215px;"></div> 
</div> 

Fiddle Demo