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

- Pollux Khafra

---

所以你想要一个背景来作为你的背景，这样当你正在使用背景时可以进行背景操作？嘿，伙计... - Marc B

你也可以使用PHP动态地添加水印：http://stackoverflow.com/questions/4426207/php-how-to-add-text-watermark-on-an-image - Waiting for Dev...

你真的不应该这样做。除非水印是图像的一部分，否则图像不算真正被加上水印。如果它们没有同时结合，任何人仍然可以轻松保存水印后面的图像并获得原始图像。 - animuson

Answer 1

我可以帮您翻译成中文。这段内容涉及到IT技术，作者使用了一些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

- animuson

Answer 2

通过给.artist-container设置更高的z-index，您将其放置在子图像的堆叠顺序中更高的位置，尽管子元素始终具有比它们的父元素更高的z-index。

如果您想要制作水印的效果，可以：

1. 将图像设置为div的背景，并将水印图像放在其中。
2. 在.artist-container内部绝对定位一个大小与图像相同、z-index比图像更高的另一个div，将水印作为背景。

- Sagar Patil

---

这将删除图像的语义含义，因为它将始终是一个水印图像（例如，在打印时不会显示背景图像）。 - animuson

Answer 3

如果图像在该元素中，则无法在图像前面放置背景。您可以简单地将主要图像用作背景，或者：

您可以做的是

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

- driedoezoe

---

背景不是水印，而是带有我想要的效果的透明背景。该图像通过php调用并且会更改，因此我无法将原始div设置为图像背景。我的唯一猜测是将div放置在图像下方，然后给它一个负上边距以重叠它。这是唯一的选择吗？ - Pollux Khafra

Answer 4

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

这里是一个演示fiddle：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;
}

- kizu

Answer 5

将图像设置为 div 的 background-image，水印设置为 img。

- Mikey G

---

这将删除图像的语义含义，因为它将始终是一个水印图像（例如，在打印时不会显示背景图像）。 - animuson

是的...但你不能让一个div的背景图像在它内部的任何东西前面。你几乎需要在那个div前面再放置另一个div，并将其背景图像设置为水印。 - Mikey G