CSS3图像帧边框z索引

我的图像有以下标记：

img.framed
{
    border-image: url('../images/design/frame.png') 40 40 40 40 stretch stretch;
    border-color: #f4be52; border-style: inset; border-width: 40px;
}

我得到了这个结果：

我不喜欢，帧内的图像覆盖了我帧的一部分

如何修改代码以使帧显示在图像上方

就像这样：

---

必须隐藏图像的某些部分才能创建所需内容

创建包含图像的主div，并为帧边框创建另一个div

这个主div是相对定位的，因此它内部绝对定位的元素是相对定位的

将帧边框背景应用于子div，而不是图像。这个子div应该与图像的宽度和高度几乎相同，并且

z-index

大于图像。另外，将其稍微置于图像的顶部和左侧

<div class="main">
    <div class="image-container">
    <!-- does not actually contain the image -->
    </div>
    <img src="some image"/>
</div>

更新：
我用真实的图像和适当的宽度和高度更新了小提琴。请检查。

---

当您将鼠标悬停在图像上时，可以看到真实的大小。这只是为了证明帧实际上与图像重叠，这正是您想要的。

我不明白这不清楚，是什么原因difference@yossi我需要帧显示在图像上。如果你专心的话，你会被发现的，在第二张图片的角落看起来有点不同@尤西：不，当然不是。先生，仔细阅读我的问题太难了吗？那么你能用一些半透明的png图像来展示这个例子吗？有着朴素的边界，这是很明显的。举个例子：@EdwardRuchevits，我已经更新了小提琴。检查它给反馈plz。酷！那太好了，谢谢你！赏金在等你，只需等24小时。：）我将要做一些类似的事情，希望在jsfiddle中看到您的答案，但是jsfiddle页面不再工作：（我如何获得完整答案？@m.othman，更新了链接

http://jsfiddle.net/OmShiv/UDtby/

。实际上我已经在JSFIDLE上更改了用户名。

.main {
    position: relative;
    top: 100px;
    left: 10%;
}
.image-container {
    position: absolute;
    left: -70px;
    top: -70px;
    border: 20px solid rgba(25,255,25, 0.5);
    z-index: 5;
    width: 230px;
    height: 330px;
    border-image: url('your frame link') 90 90 90 90 stretch stretch;
    border-color: #f4be52;
    border-style: inset;
    border-width: 86px;
}
img {
    position: absolute;
    background: #eaff77;
    width: 260px;
    height: 360px;
    z-index: 1;
}
.main:hover > img {
    z-index: 10;
}