在圖像上重疊「輸入文本」

Question

即時通訊嘗試給出一種方式，用戶可以對圖像進行標註並在圖像上進行書寫，所以我的可行解決方案是當第二個更新爲我們在第一個輸入中引入的字符串。

下面是代碼：

<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隱藏盒子，所以它看起來像你可以在圖像上寫東西。

Answer 1

您可以使用輸入與絕對位置。

請看： http://jsfiddle.net/x60cgyeh/2/

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

和CSS

#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; 
} 

Answer 2

你需要使用哪些瀏覽器？如果它只是現代的，你可以設置輸入字段本身的大小和背景圖像。

請參見：html input with background image

Answer 3

您可以將背景圖片分配給<form>標籤使用CSS這樣的：jsFiddle.

HTML ：

<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> 

CSS：

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; 
}