背景与更改元素 HTML答案

【问题标题】：Background With Changing Elements HTML背景与更改元素 HTML
【发布时间】：2019-01-28 07:07:51
【问题描述】：

对不起，如果标题没有意义，我不知道如何称呼这个问题，哈哈。

所以...我有这个 android 应用程序，它显示一个停车场，停车场布局作为背景，一些汽车在需要时显示每个停车场的“内部”。这很容易为每个停车场使用不同的布局并将图像源从空车更改为汽车等。

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

有什么想法吗？

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

谢谢！

【问题讨论】：

你走运了！这在 HTML 和 CSS 中是非常可能的，与您的应用程序类似。您能否与我们分享您已经尝试过的内容，包括您编写的任何代码？

标签： html css image web background

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：