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

问题描述：

我有一个div，其背景部分透明且带有水印。在div的内部，我打电话给一个图像，但我希望该图像出现在div背景后面，这样我可以在图像上显示带水印的透明div背景。那可能吗？下面是我有一个的CSS是不工作...使div内的图像出现在其div背景后面

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

+11

所以，你要为你的背景的背景，这样你就可以后台，而你backgrounding？ Yo dawg ... – 2012-02-03 18:02:00

你可以使用PHP在飞行中应用水印： [http://stackoverflow.com/questions/4426207/php-how-to-add-text-watermark-on-an图像] [1] [1]：http：// stackoverflow。com/questions/4426207/php-how-to-add-text-watermark-on-a-image – 2012-02-03 18:04:12

你真的不应该这样做。除非水印是*图像的一部分*，否则图像不*真正*水印。如果没有合并，任何人都可以轻松地将图像保存在水印后面并获得原始图像。 – animuson 2012-02-03 18:09:08

答

通过给.artist-container较高z-index的，你把它放在更高的堆叠顺序比个子图像，尽管儿童的Z指数总是高于父母。

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

使图像的div的背景，并放置图像水印里面。
绝对定位.artist-container范围内的另一个div，尺寸与图像相同，并且图像的z-index更高，水印作为背景。

这消除了图像的语义含义，因为它总是一个水印图像（例如，在打印时不会显示背景图像）。 – animuson 2012-02-03 18:10:37

答

使图像作为div的背景图像和水印作为IMG

这消除了图像的语义含义，因为它总是一个水印图像（例如，打印时不显示背景图像）。 – animuson 2012-02-03 18:10:03

谢谢你们。我得到了它的工作。 – 2012-02-03 18:35:01

是的...但是你不能在它里面的任何东西的前面有一个div的背景图像。你几乎需要在该div前面有另一个div，并将背景图像作为水印 – 2012-02-03 18:35:43

答

它不可能把一个背景图像的图像正面在那个元素中。你可以简单地使用主图像作为背景，或：

你可以做

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

背景不是一个水印，因为它是透明背景，具有我想要的图像效果。该图像是用PHP调用并发生变化，所以我不能将原始div设置为图像背景。我唯一的猜测就是把div放在图像下面，然后给它一个负的上边距来重叠它。这是唯一的选择吗？ – 2012-02-03 18:12:39

答

可以使用负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; 
}

答

我刮起了使用一些跨一个小样本，这不会增加任何语义内容添加到您的文档中，并且仍然保持图像的语义含义。

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

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

相关推荐