html - CSS 将 div 精确定位在某个图像点上

Question

我有一张城市天际线的风景图像，它将以 100% 宽填充用户视口(viewport)，并具有自动高度。

我想将元素放置在图像顶部的图像的精确点上(例如特定的建筑物屋顶)，但当视口(viewport)尺寸减小/增大时，我需要这些元素保留在这些精确点上。

我想过绝对定位元素(父元素相对定位)，但当视口(viewport)发生变化时，它们只是“偏离目标”。

最有效的方法是什么？

Answer 1

背景大小:封面会自动调整图片大小以适合屏幕，并且左侧和顶部的绝对位置(以百分比表示)将 div 粘贴在相对于图片的同一位置。在全屏模式下查看以下示例并尝试调整浏览器窗口的大小:

body{
  background-image: url('http://tinytour.org/wp-content/uploads/2015/02/beautiful-paris-wallpaper-for-home.jpg');
  background-size: cover;
}
#thediv{
  position: absolute;
  display: block;  
  top: 10%;
  left: 73%;
  width: 60px;
  height: 60px;
  background-color: rgba(0, 255, 0, .5)
}

<div id='thediv'></div>