使用CSS背景图像作为边框的故障

Question

我试图将图像放置在高档边框中，以使边界覆盖图像。我几乎可以工作，我希望有人能给我我需要的最后一点。在下面的示例中，如果我从主div容器中删除背景，则图像框架效果很好。在背景的情况下，图像是看不见的，大概隐藏在白色容器背景后面。这是用于测试的DABBLAT：http：//dabblet.com/gist/4356232

<style>
div {
    background: #fff;
}
a {
    width: 287px;
    height: 142px;
    display: block;
    position: relative;
    background: url(http://divisioncamera.erentalpro.com/web/list.png) no-repeat;
}
img {
    position: absolute;
    max-height: 287px;
    max-width: 142px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: -1;
}
</style>
<div>
    <a>
        <img src="http://placekitten.com/300/300"/>
    </a>
</div>

Answer 1

添加到 div

position: relative;
z-index: 1;