在 CSS 中的图像上排列输入字段

Question

我正在尝试在图像顶部排列一些输入字段，以便可以像直接输入图像一样输入数据。

我目前有一组输入字段（如上所示）和三个带有各种方块的图像。我必须以某种方式安排输入字段，使它们位于方块内。我在下面附上了相应的 HTML / CSS。这是我的第一个 Web 开发项目，所以任何 help/suggestions 将不胜感激。

.allapottab {
  display: none;
  text-align: right;
  height: 850px;
}

.festekoptions {
  width: 20px;
}

<div style="text-align: center;" class="allapottab">Külsõ állapota:
  <br>
  <img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
  <img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
  <img src="https://dummyimage.com/600x150/000/fff" width="600" height="150">
  <br>
  <input class="festekoptions" type="number" name="festek1" id="festek1" required>
  <input class="festekoptions" type="number" name="festek2" id="festek2" required>
  <input class="festekoptions" type="number" name="festek3" id="festek3" required>
  <input class="festekoptions" type="number" name="festek4" id="festek4" required>
  <input class="festekoptions" type="number" name="festek5" id="festek5" required>
  <input class="festekoptions" type="number" name="festek6" id="festek6" required>
  <input class="festekoptions" type="number" name="festek7" id="festek7" required>
  <input class="festekoptions" type="number" name="festek8" id="festek8" required>
  <input class="festekoptions" type="number" name="festek9" id="festek9" required>
  <input class="festekoptions" type="number" name="festek10" id="festek10" required>
  <input class="festekoptions" type="number" name="festek11" id="festek11" required>
  <input class="festekoptions" type="number" name="festek12" id="festek12" required>
  <input class="festekoptions" type="number" name="festek13" id="festek13" required>
  <input class="festekoptions" type="number" name="festek14" id="festek14" required>
  <input class="festekoptions" type="number" name="festek15" id="festek15" required>
  <input class="festekoptions" type="number" name="festek16" id="festek16" required>
  <input class="festekoptions" type="number" name="festek17" id="festek17" required>
  <input class="festekoptions" type="number" name="festek18" id="festek18" required>
  <input class="festekoptions" type="number" name="festek19" id="festek19" required>
  <input class="festekoptions" type="number" name="festek20" id="festek20" required>
  <input class="festekoptions" type="number" name="festek21" id="festek21" required>
  <input class="festekoptions" type="number" name="festek22" id="festek22" required>
  <input class="festekoptions" type="number" name="festek23" id="festek23" required>
  <input class="festekoptions" type="number" name="festek24" id="festek24" required>
  <input class="festekoptions" type="number" name="festek25" id="festek25" required>
  <input class="festekoptions" type="number" name="festek26" id="festek26" required>
  <input class="festekoptions" type="number" name="festek27" id="festek27" required>
  <input class="festekoptions" type="number" name="festek28" id="festek28" required>
  <input class="festekoptions" type="number" name="festek29" id="festek29" required>
  <input class="festekoptions" type="number" name="festek30" id="festek30" required>
  <br>
  <label for="seruleselony"><b>Sérülések/Előnyök:</b></label>
  <input type="text" placeholder="Sérülések / Előnyök" name="seruleselony" id="seruleselony" required><br>
</div>

Answer 1

尝试使用 position:absolute; 属性

更多信息：

https://www.tutorialrepublic.com/faq/how-to-overlay-one-div-over-another-div-using-css.php#:~:text=You%20can%20use%20the%20CSS,%2C%20fixed%20%2C%20or%20relative%20

您可以将 div 更改为按钮或将按钮放在 div 中。

Answer 2

您的方法并不理想，因为本质上无法在所有可能的设备上提供体面的 UI/UX 体验。

您可以进行的一项重大改进是将输入框渲染与汽车图像分离。汽车图像应该只画汽车，没有任何框。理想情况下它应该是一个 svg，以确保它在大屏幕和小屏幕上以相同的质量呈现。

然后，您决定每个输入的锚点并存储它们的位置。现在，因为它们是点，您可以根据当前设备类型将每个点的渲染过程与图像分离：

在大屏幕上，您可能决定在每个点呈现一个输入框，相对于点位置绝对定位；这种方法允许您根据点在图片中的位置以及可能基于其在当前 viewport/page 中的位置，在每个点（左、中、右、上、下、中）上以不同方式对齐输入框。
在小屏幕上，您可能只想呈现一个圆形按钮，它会打开一个用户输入数据的模态，并且可能在显示所有数据的图像下方有一个 table，如果框太大而无法同时显示在图像上。

以上内容应该足以让您继续实施更好的 UI/UX 解决方案。但是，如果您真的按照这条路走，当前的问题会变得过于宽泛，无法在 Whosebug 上得到解答，因此您必须将其分成更小的问题，重点关注您遇到的每个特定障碍

可能的小问题：

我如何创建一个 svg 具有一组相对于其 width/height
如何根据父元素的 width/height、
等...

这些问题中的大多数已经以一种或另一种形式得到了回答，您需要研究每一个问题，只有在找不到对您当前的特定问题有帮助的答案时才提出。

在 CSS 中的图像上排列输入字段

Arranging input fields on an image in CSS

html

javascript

css

web-deployment