Question

我有2张图像，我将其中一张用作背景（A），并将另一张图像（B）设置在前一张的一部分上。这正是我要实现的目标，如果分辨率改变，则B图像正在“移动”并且不再位于我想要的位置。

为此，我需要以下HTML代码

<!DOCTYPE html>
<html>
<!-- Our Custom CSS -->
<link rel="stylesheet" href="main.css">
<body>


<div class="parent">
  <!-- Backbroungimage source -->
  <img class="imageBack" src="./back.png" />
  <!-- Over image -->
   <img class="imageOver" src="./over.png" />
</div>


</body>
</html>

使用他的CSS

.parent {
  position: relative;
 -webkit-box-align:center;
 -webkit-box-pack:center;
 display:-webkit-box;
}
.imageBack {
  position: relative;
  top: 0;
  left: 0;


}
.imageOver {
  position: absolute;
  top: 2%;
  left:17%;

}

您能帮助我，告诉我我做错了什么，为什么更改分辨率后图像仍在移动？

Answer 1

您正在使用百分比对齐第二张图像。百分比是根据元素的父级属性计算的。

例如，假设您的窗口的宽度为1000px。您的父div作为block，将进行扩展以适合此宽度，因此.parent的宽度也为1000px。 .imageOver的左侧位置为17％，即1000px = 170px中的17％。因此，对于宽度为1000像素的窗口，.imageOver将从其父对象的左侧移至170像素。

现在，假设您将窗口的大小调整为800px的宽度。 .parent的宽度也是800px。因此.imageOver的{{1}}属性为800px的17％，即136px。因此，将窗口的大小从1000px调整为800px会将left的位置从左侧的170px移到左侧的136px。

如果无论窗口大小如何都希望将图像保持在同一位置，请使用诸如.imageOver之类的固定单位来定义其px和left属性。

例如：

top

或者任何值定位图像以最适合您的情况。

将图像放在另一个图像上并保持比例（HTML-CSS）

1 个答案: