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

如果两张图片都位于左上角，则基本图片上需要<{1}} 不，但如果需要，可以让它调整其位置。

您还可以在主图像上使用静态位置，并在叠加图像上使用相对位置：

position:absolute

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

Answer 2

首先将图像包裹在<div>中，首先覆盖图像，然后将实际图像包裹起来，然后将div的css设置为position: relative。

然后可以给两张图像{c} {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。

Answer 3

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

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

3 个答案: