HTML/CSS - 将图片放在另一张图片上方？

Question

我有两个png文件。一个是实际图像，另一个是大部分透明的图像，其顶部右侧带有价格标签图标。我知道可以在Photoshop中将它们合并成一个图像。

但我需要动态生成这些图像，用于多个不同的基础图像。

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

- Johnny Appal

Answer 1

当然，最简单的方法是在容器中绝对定位这两个图像：

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

但是为了让这个方法生效，您需要知道基础图像的宽度。

- harpo

Answer 2

将图片放在一个

标签中，首先放置覆盖图像，其次放置实际图像，并且可以将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。

- Paul Sham

Answer 3

你需要将position属性设置为relative或absolute，将left和top属性设置为所需的值，然后将z-index属性设置为1（假设您没有其他已设置的z-index属性）。请记住，在没有更改top和left属性的情况下，图像应该渲染的位置将会有一个空白处。

- Tyler Crompton