web：如何將輸入框放入圖片中？

Question

我想用一張圖片作爲我的網站設計。這是一個普通的，就像谷歌的。

<img src... done... > 

現在，我想在圖片的文本區域放置一個輸入框，我該怎麼做？

Answer 1

最好的辦法恕我直言將與該圖像作爲背景，並利用邊緣放置一個<input>孩子，還是絕對的一<div>定位如下：

<div style="background: url(img/background.jpg) no-repeat;"> 
    <input type="text" name="whatever" style="margin-left: 20px; margin-top: 40px;" /> 
</div> 

Answer 2

這不一定是一個好設計。

要實現它，你需要使用CSS。

你應該做一個大容器<div>並應用以下規則：

div.Container { 
    background: url('image'); 
    width: 300px; 
    height: 200px; 
    position: relative; 
} 
div.Container input#MyTextBox { 
    position: absolute; 
    left: 100px; 
    top: 150px; 
}