HTML/CSS - 将img放在img之上？

Question

我有两个PNG的。一个是实际图像，另一个是大多数透明图像，右上角有一个贴纸价格图标。我知道我可以将它们结合在Photoshop中，并创建一个图像。

但我需要这些动态生成的一堆不同的基础图像。

有没有某种方法来编码“实际图像”，然后使用代码覆盖“透明贴纸图像”？

Answer 1

您需要将position属性设置为relative或absolute，将左侧和顶部属性设置为所需值，然后将z-index属性设置为1（假设您没有其他z-index属性已经设置）。请记住，如果图像应该在没有改变的顶部和左侧属性的情况下呈现，应该有一个空间。

Answer 2

当然，最简单的方法将两个图像的容器内的绝对定位：

<div style="position:relative"> 
    <img src="main-image.jpg" style="position:absolute;"/> 
    <img src="overlay-image.png" style="position:absolute;"/> 
</div> 

容器上的position:relative需要对儿童工作的绝对定位。当然，如果容器本身已经完全定位，那就没问题了。

的position:absolute是不所需的基本图像上，如果两个图像的左上角，而拥有它可以让你如果需要调整它的位置。

你也可以使用静态的位置在主图像和相对位置覆盖图像上：

<div style="position:relative"> 
    <img src="main-image.jpg" style="width:100px"/> 
    <img src="overlay-image.png" style="position:relative; left:-100px"/> 
</div> 

，但这个工作你需要知道的基本图像的宽度。

Answer 3

将图像包装在<div>中，首先使用重叠图像，然后将实际图像作为第二个图像，并将div的css设置为position: relative。

然后可以给出这两个图像的css {position: absolute; top: 0; left: 0;}。

<div style="position:relative;"> 
    <img src="overlay.png" style="position: absolute; top: 0; left: 0;"> 
    <img src="actual.png" style="position: absolute; top: 0; left: 0;"> 
</div>` 

如果你真的想要安全，你可以设置每个图像的z-index。