如何使用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;
}

Answer 2

使用absolute位置，如：

HTML：

<img src="imageName.png" id="img" />
<input type="text" id="txt" />

CSS：

#txt{
    position : absolute;
    left : 200px;
    top:150px;
}
#img{
    position : relative;
}

Answer 3

我想到了两个解决方案：

1 - 使用宽度和高度与图像和样式相同的容器（div，table），如下所示：

position: relative;
background: url("http://i.stack.imgur.com/xyJet.png") no-repeat;

然后将输入字段放在带有样式的容器中（对每个输入使用不同的左侧和顶部）

position: relative;
left: 100px;
top: 5px;

2 - 在某个位置不是静态的容器中（需要定位具有位置的子元素）将该图像设置为img元素，将所有输入字段设置为样式：

position: relative;
left: 0px;
top: 0px;

您只需要通过更改左侧和顶部属性来根据需要定位它们。

Answer 4

您可以将图像设置为div的背景，并在div上添加绝对定位输入

<强> HTML

<div class="mydiv" >
    <input type="text" class="fistinput" />
</div>

<强> CSS

div.mydiv{
    background-image:url('http://i.stack.imgur.com/xyJet.png');
    height:447px;
    width:591px;
}
.fistinput{
    position:absolute;
    top:120px;
    left:200px;
    width:50px;
}

尝试FIDDLE