CSS边框图像和背景图像屏蔽

Question

请查看我在这个jsfile -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);
}

我有一个图像位于border-image，

外部的border-image是一个形状，内部的image是正方形，

我想让图像填充border-image的整个边框(比如屏蔽内部图像)。

我该怎么做呢?

Answer 1

你看起来像这样吗?

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

<<p> 小提琴演示/strong>