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

Question

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

我想把汽车放在这个div上。

汽车的位置将由API确定。

最终结果将是这样的。

有可能实现吗？如果有可能请指导我。三江源。

Answer 1

您可以使用position: absolute;：

定位汽车

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

CSS：

.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: ...;
}

Answer 2

这是一个简单的基本示例，说明如何使用纯html和css：

＆＃13;

＆＃13;

.car-park {
    width: 1200px;
    height:439px;
    background: url('https://i.stack.imgur.com/n2BwR.png') 0 0 no-repeat;
    position: relative;
  }
  
  .car {
    background: url('https://i.stack.imgur.com/rZYO1.png') 0 0 no-repeat;
    width: 19px;
    height:40px;
    position: absolute;
  }
  
  .car-1 {
    top: 50px;
    left: 195px;
  }
  
  .car-2 {
    top: 295px;
    left: 295px;
  }

＆＃13;

<div class="car-park">
  <div class="car car-1"></div>
  <div class="car car-2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

您还可以像这样控制汽车的尺寸：

＆＃13;

＆＃13;

.car {
  background: url('https://i.stack.imgur.com/rZYO1.png') 0 0 no-repeat;
  background-size: contain;
  width: 19px;
  height:40px;
}

.car-lg {
  width: 22.8px;
  height:48px;
}

.car-xl {
  width: 28.8px;
  height:60px;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}

＆＃13;

<div class="car margin-bottom-10"></div>
<div class="car car-lg margin-bottom-10"></div>
<div class="car car-xl margin-bottom-10"></div>

＆＃13;

＆＃13;

＆＃13;

这是将背景设置为100％宽度的方式：

＆＃13;

＆＃13;

body {
  height: 100vh;
}

.car-park {
  width: 100%;
  height: calc(100% * 1020 / 439);
  max-height: 439px;
  background: url(https://i.stack.imgur.com/n2BwR.png) 0 0 no-repeat;
  background-size: contain;
  position: relative;
}

＆＃13;

<div class="car-park"></div>

＆＃13;

＆＃13;

＆＃13;