Javascript 重叠“；“输入文本”；在图像上方

我试图给出一种方法，用户可以给一个图像加上标题，然后在图像上写下标题，所以我可行的解决方案是，当第二个文本字段用我们在第一次输入中引入的字符串更新时，使用两个文本字段

代码如下：

<form action="#" id="form_field">
    <input type="text" id="textfield1" value="" onChange="document.getElementById('textfield2').value=this.value">
    <input type="text" id="textfield2" value="">
</form>

---

是否有任何形式可以在图像上插入“输入文本”？在那之后，我将用css隐藏这个框，这样看起来你就可以在图像上写东西了。

你需要在哪些浏览器中使用它？如果只是现代的，您可以设置输入字段本身的大小和背景图像

---

请参阅：

您可以使用带有绝对位置的输入

看一看:

---

您可以使用如下CSS将背景图像分配给

标记：

HTML:

---

谢谢，这是一个完美的解决方案。

<form action="#" id="form_field">
    <input type="text" id="textfield2" value="" placeholder="Insert image title...">
    <img src="http://dummyimage.com/300/eee/aaa">
</form>

#form_field {
    position:relative;
    width:300px;
}

#textfield2 {
    position:absolute;
    background:transparent;
    border:0;
    color:#000;
    font-size:20px;
    text-align:center;
    width:100%;
    top:20px;
    outline:none;
}

<form action="#" id="form_field">
    <input type="text" id="textfield1" value="" onChange="document.getElementById('textfield2').value=this.value" placeholder="Enter Image Title">
    <input type="text" id="textfield2"  placeholder="Enter Image Description" value="">
</form>

form#form_field {
    width: 600px;
    height: 359px;
    background-image: url(//bg image url)
}
form#form_field input {
    background: transparent;
    border: none;
    width: 100%;
    text-align: center;
    font-size: 25px;
    margin-top: 100px;
    color: white;
}
form#form_field input:focus {
    outline: none;
}