Question

我有一个城市天空线的风景图像，它将以100％宽度填充用户视口，并具有自动高度。

我想在图像的精确点（例如特定的建筑物屋顶）上放置图像顶部的元素，但是当视口减小/增大时，我需要这些元素保持在那些精确点上。

我想过绝对定位元素（父母相对定位），但他们只是去了目标＆＃34;当视口改变时。

最有效的方法是什么？

Answer 1

background-size：封面自动调整图片大小以适应屏幕，绝对位置左右顶部百分比将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>

CSS位置div恰好超过某个图像点

1 个答案: