html - HTML 图像叠加定位

Question

我正在为学校做一个小组项目，该项目将于 17 日到期。我试图让一个图像完全居中于另一个图像。我想我几天前基本上已经弄清楚了，但是现在我正在家用电脑上处理它，对齐方式都搞砸了。我需要帮助使图像水平居中于屏幕中间，并使顶部图像居中于背面图像的中间。这是屏幕截图、代码和特定代码的链接。

提前致谢！

HTML图像代码：

<div class="flagpart">
  <article id="flag2">
  <div id="backimg"></div>
  <img src="flag.png" class="flag">
  </article>
</div>

CSS图像代码：

#backimg {
background-image: url(flag.png);
background-repeat: no-repeat;
background-size: contain;
height: 750px;
background-clip: padding-box;
margin:0 auto;
text-align: center;
  filter: blur(5px);
z-index: 1;
}

.flag {
  width: 50%;
  height: 50%;
  display:inline-block;
  text-align: center;
  margin: -42.5% 0% 0% -25%;
  z-index: 2;
  position: absolute;
}
#flag2 {


}
.flagpart {

text-align: center;

}

backimg 是模糊的背景图像，flagpart 包含两个图像，flag2 是另一个容器，flag 是顶部图像。

网站链接： https ://cooking-light-3.spencerleagra.repl.co/recipe2.html

代码链接： 链接在这里

此外，如果有人对如何使网站看起来更好有任何整体建议，请尽管说出来。

标签： htmlcss

Answer 1

您可以将 img 标签放在具有较大图像的 div 内。将较大的 div 设置为position: relative，将 img 设置为，position: absolute以便较小的图像使用较大的图像有一个指南。

html:

<div class="flagpart">
  <article id="flag2">
    <div id="backimg">
      <img src="flag.png" class="flag">
    </div>
  </article>
</div>

CSS：

#backimg {
  position: relative;
}
#backimg img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

因为 img 的 parent 设置为position relative;并且 img 是position absolute;，所以较小的图像使用它的 parent 作为指导。top: 50%;并将left: 50%;较小图像的左上角设置在较大图像的中心，并将transform: translate(-50%, -50%);较小图像的宽度和高度的一半向左上方移动，以将其定位在确切的中心。这是一张来自victorw999的图片，说明了这一点：