CSS3 图像框架边框 z-index

Question

我的图片有以下标记:

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

我得到了这个结果:

我不喜欢，框架内的图像覆盖了我框架的一部分。

如何修改我的代码以使框架显示在图像上方？

像那样:

Answer 1

必须隐藏图像的某些部分才能创建您想要的内容。

创建包含您的图像的主 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>

JS Fiddle

我使用普通边框来显示重叠。绿色边框与图片黄色背景重叠。

这是 CSS:

.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;
}

更新:
我已经用真实图像和适当的宽度和高度更新了 fiddle 。请检查。
当您将鼠标悬停在图像上时，您会看到实际尺寸。这只是为了证明 Frame 实际上与图像重叠，这正是您想要的。