CSS位置div恰好位于某个图像点上

Question

我有一个城市天际线的景观图像，这将填补用户的视窗在100%宽，与自动高度。

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

我想过绝对定位元素(父级相对定位)，但当视口改变时，它们就会“偏离目标”。

做这件事最有效的方法是什么？

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>

​