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

Question

我有两个 png。一张是实际图片，另一张是几乎透明的图片，右上角有标价图标。我知道我可以在 photoshop 中组合这些并创建一个图像。

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

有没有办法对“实际图像”进行编码，然后使用代码覆盖“透明贴纸图像”？

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 是 child 工作的绝对定位所必需的。当然，如果容器本身已经绝对定位，那也没关系。

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>

但要使其正常工作，您需要知道基本图像的宽度。