跟随响应背景图像的位置图标

Question

我正在尝试建立一个网站，其中我有一些房子的响应式背景图片，我有一些位置图标（例如google），它们位于某些房屋之上。

无论如何，这些位置图标是否可以跟随背景以保持其位置高于它们所在的某些房屋？谢谢。

以下是响应式背景图片的代码：

body {
  background: url(../img/backgroundLarge.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

位置图标像普通的img标签一样放置，并用填充物设置其位置：

<img src="img/locationIcon.png">

也许是一些聪明的jQuery或JavaScript？

谢谢。

Answer 1

你必须做一些猜测和检查工作，以找出你想要将你的图标绝对定位在房屋上方的身体的宽度/高度百分比 - 但是你可以使用CSS。 / p>

#someIcon {
 left:50%;
 top:30%;
}

您可能还需要考虑图标图像大小 - 您可以通过CSS中的猜测和检查直到它看起来不错或使用JavaScript计算要设置的边距。

如果你的意思是“响应”，即图像本身是动画的（如.GIF），那么你将会有更艰难的时间。您可以使用SVG Paths并为图标设置动画以随背景一起移动，但您也可以更好地将移动部件从图像中移除并使用与Parallax类似的内容。