Question

我在div元素中有一个图像：

<div class="full-width">
    <img src="images/products/product1.jpg" />
</div>

我想添加名为 frame.png 的第二张图片，但不像背景图片！

<img src="images/products/frame.png" />

我想将图像 product1.jpg 与 frame.png 重叠，这样看起来就像 frame.png 结束了< EM> prduct1.jpg

这是否可以使用z-index，但不能作为背景图片，因为我在响应式设计中使用它？

最后我希望得到类似的内容：

<div class="full-width">
    <img src="images/products/product1.jpg" />
    <img src="images/products/frame.png" />
</div>

怎么做？

Answer 1

让我们说porduct1.jpg有#product id和frame.png #frame id 现在，

如果

.full-width {position:absolute;}
#product, #frame {position:relative;}

另外根据#frame width ..，+ z-index

为#product设置top和left

Answer 2

首先将div设置为position:relative，将图像设置为css中的position:absolute。然后设置z-index为例如如果您希望图像1高于图像2，则将其z-index设置为高于图像2。

Answer 3

<div class="full-width">
    <img class="imgone" src="http://s23.postimg.org/b2h2rz457/image.png" />
    <img class="imgtwo" src="http://s13.postimg.org/jlyzyofkn/image.png" />
</div>

.full-width {
    position: relative;
    width: 300px;
    height: 200px;
}
img.imgone {
    position:absolute;
    width: 300px;
    height: 200px;
}
img.imgtwo {
    position:absolute;
    width: 80px;
    height: 80px;
    top: 10px;
    right: 10px;
}

CHECK OUT THIS DEMO

Answer 4

为position:relative提供full-width，在position:absolute内提供img。使用各自的top，left ..属性相互对齐。在要显示的图像上使用z-index。我认为这会奏效。但是在响应式设计中显示图像重叠是一个坏主意。

用z-index重叠两个图像？

4 个答案: