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

【问题标题】：HTML, CSS - image inside image, how to do that?HTML, CSS - 图像中的图像，怎么做？
【发布时间】：2023-01-11 20:04:18
【问题描述】：

我有这段 HTML 代码：

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

这图片.png(300x300 px) 是主图像。我想把image-inside-pic-png.png（20x20 像素）在里面。当我申请位置：绝对；在小图像上，它只能暂时工作。如果我更改其中任何一个的大小，它就不再有效。

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

谢谢你的帮助

【问题讨论】：

听起来你正在使用背景图片，应该通过 CSS 设置。 image-inside-pic-png.png 是内容的一部分，还是仅仅用于样式？

标签： html css image css-position

【解决方案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。

【讨论】：

【解决方案2】：

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

看到这个小提琴：http://jsfiddle.net/cRqhT/3/
为简单起见定义了边框和图像大小

【讨论】：

【解决方案3】：

将两个图像放在一个使用 position:relative 的 div 中，然后将 position:absolute 应用于图像，并根据需要调整值。

【讨论】：

【解决方案4】：

 **html**

  <div class="images">
          <img src="./images/Rectangle.png" alt="bg"/>
          <img src="./images/lady.png" alt="lady" class="lady-image"/>
  </div>
   


**css**
      .images {
       position: relative;
       }

       .lady-image {
        position: absolute;
        top: 0;
        right: 0;
        }

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加更多详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写出好的答案的信息in the help center。
回答时，您应该包括对代码的描述，以便其他人可以理解它是如何解决问题的