html - 背景中的图像始终位于同一位置？

Question

我认为我有一项不可能完成的任务，但在放弃之前我想确定它真的不可能。也许有数百万个媒体查询是可能的，但这不值得为之奋斗。

但是，我有一个高度为 100vh 的背景图像，这意味着它始终是用户窗口的 100% 高度和 100% 宽度。这两件事可能使我的任务无法完成。

在背景图片中，我有另一张图片应该始终位于该位置，无论如何。

我想出了一个例子。我希望火箭始终停留在地球上的那个矩形上。我在我的屏幕上做到了这一点，但由于屏幕尺寸不同，它可能会在你的屏幕上滑动。

(stackoverflow 不允许带有 http 的图像，因此请将图像 src 更改为 http 或查看我的代码笔:https://codepen.io/anon/pen/yjXbPL)

.background {
  background-repeat: no-repeat;
  background-image: url("https://wallpaper-house.com/data/out/7/wallpaper2you_191762.jpg");
  background-size: cover;
  background-position: center center;
  height: 100vh;
  width: 100%;
}

img {
  width: 150px;
  position: fixed;
  top: 240px;
  right: 780px;
  transform: rotate(-20deg)
}

<div class="background">
  <img src="https://www.myiconfinder.com/uploads/iconsets/256-256-7647188dd0df401f7ec5c5358a0af9a1-rocket.png">
</div>

这可能吗？

Answer 1

像你一样使用 Position fixed。使用左和上，而不是右。将图片放在背景 div 旁边，而不是放在里面。