Javascript 我想将图像放置在具有特定背景的div上

我想创建一个div（100%宽度和高度自动）。它将有这个背景图像

我想把车停在这上面

汽车的位置将由API确定

最终结果将是这样的

---

有可能实现吗？如果可能的话，请指导我。谢谢。

您可以使用

位置：绝对：

<div class="container">
 <img src="img/car.png" class="car car-1">
 <img src="img/car.png" class="car car-2">
</div>

下面是一个简单而基本的示例，说明了如何使用纯html和css进行此操作：


。停车场{
宽度：1200px；
高度：439px；
背景：url（'https://i.stack.imgur.com/n2BwR.png'）0 0不重复；
位置：相对位置；
}
.汽车{
背景：url（'https://i.stack.imgur.com/rZYO1.png'）0 0不重复；
宽度：19px；
高度：40px；
位置：绝对位置；
}
.car-1{
顶部：50px；
左：195px；
}
.car-2{
顶部：295px；
左：295px；
}

请拿起，环顾四周，通读，特别是努力解决问题。如果您在这样做时遇到了特定问题，请在尝试时发布一个问题（使用jQuery的JavaScript代码），说明什么不起作用，并解释到目前为止你的研究。这是硬编码还是动态定位的？我们可以用百分比代替像素吗？由于响应性，也可以用百分比来映射吗？@AliZia我很抱歉，这对于一个没有任何尝试的问题来说太复杂了（没有HTML/CSS）-你必须先自己尝试，如果你有困难，你可以问一个问题，但这一次，它还应该包括您尝试过的代码和您遇到的问题的清晰描述。@Alicia还请看第三个片段-我希望它能帮助您获得100%的宽度让我试试，然后我会让您知道broCan我们以百分比的形式来做这件事，因为这张地图位于地图的中心位置应用程序。如果我们滚动呢？汽车错排了？
.container {
  position: relative;
  background: url(img/parking.png) no-repeat top left / 100% auto;
  width: ...; height: ...;
}
.car {
  position: absolute;
}
.car-1 {
  top: ...; left: ...;
}
.car-2 {
  top: ...; left: ...;
}