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

Question

我有这段 HTML 代码：

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

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

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

谢谢你的帮助

原文由 user984621 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在不更改标记的情况下，这可以实现，例如使用 display:inline-block 到最外层的 div 元素（因此它不会扩展 100% 的可用宽度）和位置 relative + absolute 最外层的 div 和缩略图

看到这个小提琴：http: //jsfiddle.net/cRqhT/3/

为简单起见定义了边框和图像大小

原文由 Fabrizio Calderan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我认为这应该有效：

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。

原文由 Waiting for Dev… 发布，翻译遵循 CC BY-SA 3.0 许可协议