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

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

<强> 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

Answer 2

通过赋予.artist-container更高的z-index，您将其置于堆叠顺序中的位置高于子图像，尽管儿童的z-index总是高于其父级。

如果你想给出水印的效果，你可以：

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

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

使div内的图像显示在div背景后面

5 个答案: