Question

不知道我可能做错了什么，我试着这样说：

.container-image{
    background: url('http://i.imgur.com/Dl8UBO7.png');
    width: 226px;
    height: 169px;
    display: inline-block;
    position: relative;
    z-index: 20; // dont work
}

.container-image img{
    position: absolute;
    left: 14px;
    top: 13px;
    width: 199px;
    height: 141px;
    z-index: 10; // dont work
}

jsfiddle

我需要图像在边缘后面（.container-image）

Answer 1

在边框div和图像周围放置一个容器。 http://jsfiddle.net/7fqAu/2/

<div class='example'>
    <div class="container-image"></div>
    <img src="http://i.imgur.com/T0KMwIs.jpg">
</div>

body {
    background: red;
}
.container-image {
    background: url('http://i.imgur.com/Dl8UBO7.png');
    width: 226px;
    height: 169px;
    position: relative;
    z-index: 20;
}
.example {
    width: 226px;
    height: 169px;
    position: relative;
}
.example img {
    position: absolute;
    left: 14px;
    top: 13px;
    width: 199px;
    height: 141px;
    z-index: 10;
}

Answer 2

您可以将边框图像添加到.container-image:after而不是.container-image的背景 - 根本不需要z-index。

jsfiddle here

z-index属性不适用于带图像的容器

2 个答案: