css - 使 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

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

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 Live Preview