HTML, CSS - 图像中的图像，怎么做？

Question

我有这段 HTML 代码:

<div>
  <div>
    <image src="image-inside-pic-png.png" alt="">
  </div>
  <image src="pic.png" alt="" />
</div>

pic.png(300x300 像素)是主图像。我想将 image-inside-pic-png.png (20x20 px) 放入其中。当我在小图片上应用 position: absolute; 时，它只会暂时起作用。如果我更改其中任何一个的大小，它就不再有效。

所以我的问题是，我怎样才能将小图片始终移动到大图片中 - 而这个小图片总是从顶部 15px 到 30px大图的右边距？

谢谢你的帮助

Answer 1

我认为这应该可行:

HTML:

<div>
  <img src="image-inside-pic-png.png" alt="" class="inner-image"/>
  <img src="pic.png" alt="" />
</div>

CSS:

div {
  position: relative;
}

.inner-image {
  position: absolute;
  top: 15px;
  right: 30px;
}

无论如何，请确保您需要使用 HTML 执行此操作。也许最好使用 Photoshop 或 Gimp 简单地编辑图像。或者也许一张图片仅用于样式目的，那么您应该使用 CSS。