如何叠加两张图片？

Question

所以我试图让一个图像覆盖另一个图像，就像图像一样。 一张图像覆盖另一张图像的屏幕截图

但是，每当屏幕改变尺寸时，覆盖的图像不会随之移动。无论我尝试或更改什么，它都会保持其在屏幕上的位置。我希望它在背景图像上具有相同的位置。

我尝试更改背景和覆盖图像的位置，但它只是使图像最终彼此相邻。我还尝试过更改图像和容器的宽度+寻找其他有同样问题的人，但似乎不起作用。

.img-container {
  position: relative;
  width: 800px;
  /* Set to the size of your background image */
  height: auto;
}

.background-img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  /* Background image stays behind */
}

.overlay-img {
  position: absolute;
  top: 10rem;
  /* Adjust the position of the overlay image */
  left: 45rem;
  max-width: 100%;
  /* Set size of the overlay image */
  z-index: 2;
  /* Overlay image appears on top */
}

<section id="portfolio">
  <div class="img-container">
    <img class="background-img" src="https://picsum.photos/1000/1000">
    <img class="overlay-img" src="https://picsum.photos/200/300" alt="">
  </div>
</section>

Answer 1

您可以简单地使用

top: 10rem; left: 45rem;

和

bottom

将图像放置在背景图像的右下侧，而不是使用

right

。

.img-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: auto;
}

.background-img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay-img {
  position: absolute;
  bottom: 10px;
  right: 10px;
  max-width: 100%;
  z-index: 2;
}

<section id="portfolio">
  <div class="img-container">
    <img class="background-img" src="https://picsum.photos/1000/1000">
    <img class="overlay-img" src="https://picsum.photos/200/300" alt="">
  </div>
</section>

甚至你可以让窗口变小或变大，然后它就会根据窗口移动。