如何使用 CSS 将 html 输入文本放入图像中？

Question

我有这样的图像：

如何在图像中插入一些输入字段？

用户单击图像的输入字段（绿色框）并输入一些值应该是可能的？

Answer 1

创建div具有图像尺寸的元素并将其 css 设置position为相对。然后将图像的位置设置为absolute和它的坐标 0,0。然后您也可以通过绝对定位来定位所有复选框。

通过确保包装div具有position: relative;，您可以将复选框（和图像）从div.

HTML

<div id="wrapper">
  <img src="...">
  <input type="checkbox" style="position: absolute; top: 20px; left: 100px;">
  <input type="checkbox" style="position: absolute; top: 50px; left: 200px;">
</div>

CSS

div#wrapper {
  position: relative;
  width: 400px;
  height: 200px;
}

img {
  position: absolute;
  top: 0;  
  left: 0;
}