时间戳

首页 > 解决方案 > 在窗口重新调整大小时居中重叠图像

html - 在窗口重新调整大小时居中重叠图像

问题描述

我有 2 个相同大小的图像需要完美重叠并在窗口重新调整大小时保持重叠。由于某种原因，设置位置：绝对；反转居中。这是到目前为止的代码，我已经用谷歌图片上的通用图片替换了我的图片。

<img src = "http://www.brittlestar.org.uk/wp-content/uploads/2014/02/300x300.gif" width = 50%  height = auto style="position: relative; margin-left: auto; margin-right: auto; display: block;">
<img src = "https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png" width = 50% height = auto style = "position: absolute; z-index: 2; top: 50%; margin-left: auto; margin-right: auto; display: block;">

有谁知道如何解决这一问题？谢谢。

标签： htmlcss

解决方案

我希望这就是你要找的:)

注意：请花时间阅读https://stackoverflow.com/help/how-to-ask，如果您不提供任何代码，这里的人将无法帮助您

html, body {
  height: 100%;
}
div {
  top: 50%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  transform: translateY(-50%);
}
img {
  max-width: 100%;
}
.overlap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
<div>
  <img src="https://via.placeholder.com/300x300">
  <img class="overlap" src="https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png">
</div>

推荐阅读