HTML/CSS - 将img放在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容器上是需要儿童工作的绝对定位.当然,如果容器本身已经绝对定位,那就没关系了.

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

您需要将位置属性设置为相对或绝对，将左侧和顶部属性设置为所需的值，然后将 z-index 属性设置为 1（假设您尚未设置其他 z-index 属性）。请记住，在没有更改顶部和左侧属性的情况下应该渲染图像的地方，应该有一个空间。