是否可以使用CSS将一个图像放在另一个图像上，这样即使图像缩放/窗口调整大小，图像也会处于相同的相对位置？因此，对用户来说，它看起来就像一个平面图像一样。

示例，在这个代码片段中，我有一个红点和一个狗的图片，根据窗口的大小，红点应该在狗的左耳的某个地方。我希望它完全停留在相同的地方（相应的背景图片），无论多大或小的狗图片得到缩放。我的意思是，实际位置会改变，但是由于图片变大了，它会移动到正确的位置，所以在视觉上它没有移动。

<style>
.container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
}
.myDiv {
  height: 100%;
  width: 100%;
  background-image: url('https://toppng.com/uploads/preview/red-dot-icon-png-bowling-ball-transparent-background-11562953794gu3xfby6c8.png'), url('https://image.freepik.com/free-photo/selective-focus-shot-adorable-kooikerhondje-dog-field_181624-29383.jpg');
  background-size: 5% auto, cover;
  background-repeat: no-repeat;
  background-position: 50% 75%, 0 0;
  background-blend-mode: normal;
}
</style>
<div class="container>
  <div class="myDiv" />
</div>

我对它的尝试是对所有东西（背景大小和位置）使用百分比。我想随着图片的缩放，位置也会缩放，但它并不像预期的那样工作…红点有时会在狗的耳朵外面，或者只是在耳朵里的另一个地方。

顺晟科技：

绝对定位您的球png和使用百分比值为您和属性。只要所有维度都是百分比，所有元素都将按比例缩放。

如果有必要，您也可以使用小数表示位置（例如），以便将其精确地放在正确的位置。