使 div 内的图像出现在其 div 背景后面

Question

我有一个 div，其背景部分透明并带有水印。在 div 内部，我正在调用一个图像，但我希望该图像出现在 div 背景后面，这样我就可以让带水印的透明 div 背景出现在图像上。这可能吗？这是我的 css 不起作用......

.artist-container {
background:url(images/artist-back.png);
    width:310px;
    height:376px;
    margin-left:-9px;
    z-index:331;
    position:relative;
}
.artist-container img {
    width:300px;
    height:300px;
    margin-left:5px;
    z-index:330;
    position:relative;
}

Answer 1

通过为 .artist-container 提供更高的 z-index，您可以将其放置在比子图像更高的堆叠顺序中，尽管子图像的 z-index 始终高于其父图像。

如果想要实现水印的效果，可以：

1. 将图片作为div的背景，并在其内部放置图片水印。

2. 将另一个 div 绝对放置在 .artist-container 中，其尺寸与图像相同，并且图像的 z-index 较高，以水印作为背景。

Answer 2

我使用一些跨度制作了一个小样本，它不会向您的文档添加任何语义内容，并且仍然会保留图像的语义含义。

HTML：

<span class="cover_contain">
   <img src="http://i.imgur.com/hla4q.jpg" alt="[image]" width="128" height="128" />
   <span class="cover_image"></span>
</span>

CSS：

span.cover_contain {
    display: inline-block;
    position: relative;
}
span.cover_image {
    display: block;
    background: url('http://i.imgur.com/5BtFV.png') center center no-repeat;
    width: 128px;
    height: 128px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

jsFiddle 实时预览

Answer 3

将图像作为div的背景图像，将水印作为img

Answer 4

不可能在该元素中的图像前面放置背景。您可以简单地使用主图像作为背景，或者：

您可以做什么

<div class="holder">
    <img src=".." class="main_image">
    <img src=".." class="watermark">
</div>

.holder {
    width:100px;
    height:100px;
    position:relative;
    display:block;
 }

 .main_image {
     position:absolute;
     top:0;
     left:0;
     z-index:0;
 }
.watermark {
     position:absolute;
     top:0;
     left:0;
     z-index:9;
 }

Answer 5

您可以使用负的 z-index，但在这种情况下，您必须让包装器不具有任何 z-index。这是堆叠上下文的特征之一。

这是一个演示小提琴： http://dabblet.com/gist/1731538

您的代码将是这样的：

.artist-container {
    background:url(images/artist-back.png);
    width:310px;
    height:376px;
    margin-left:-9px;
    position:relative;
}
.artist-container img {
    width:300px;
    height:300px;
    margin-left:5px;
    z-index:-1;
    position:relative;
}