Question

很抱歉，如果标题没有意义，我不知道该怎么称呼，大声笑。

所以...我有一个显示停车场的android应用，停车场的布局为背景，一些汽车在需要时显示每个停车场的“内部”。可以轻松地为每个停车位使用不同的布局，并将图像源从空置更改为汽车等来构建。

问题是...我需要在网页上复制它，而且我不知道如何建立背景并在其上更改图像。我想我可以为每个停车位创建一堆div，在需要时更改img来源，并使用停车位布局作为整个背景，但是我不知道这是否是最佳做法，这个主意听起来对我没有反应。

有什么想法吗？

我不希望/不需要像Android那样实时更改，但是我确实需要复制在背景之上以编程方式更改图像的想法。

谢谢！

Answer 1

使用CSS覆盖图像的唯一真正方法是通过相对显示的容器将其内部图像元素绝对定位。

使用此想法，可以将汽车图像绝对定位在图像停车位的顶部。

话虽这么说，为什么不为这个停车场创建一个更抽象的表示呢？

.flex-container {
  display: flex;
  justify-content: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.available {
  background-color: green;
}

.unavailable {
  background-color: red;
}

<!DOCTYPE html>
<html>
<body>
<h1>Parking spot availability</h1>

<p>Green indicates an available spot. Red indicates an unavailable spot.</p>

<div class="flex-container">
  <div class="available">1</div>
  <div class="unavailable">2</div>
  <div class="available">3</div>  
</div>

</body>
</html>

Answer 2

对于这样的事情，我建议使用jQuery。为每个图像注册事件处理程序，并相应地调整src属性。我在下面提供了一个示例供审核：

$('.car').on('click', function () {
  $(this).prop('src', 'https://placeholdit.co//i/300x150?text=A%20Completely%20New%20Image!&bg=111111');
});

.playground {
  background-color: #ccc;
  width: 500px;
  height: 500px;
}

.car {
  margin: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="playground">
  <img src="https://placeholdit.co//i/200x150?text=The%20Original%20Image" class="car" />
</div>

背景与不断变化的元素HTML

2 个答案: