將輸入類型文本放在圖像的中心

我需要創建一個html頁面。在這個html頁面中，我需要一個帶有<input type="text "/>的圖像。該輸入位於圖像的中間;此輸入類型文本在右側輸入中也有「搜索」圖標。將輸入類型文本放在圖像的中心

我試圖建立這樣的代碼：

<html> 
    <img src="./home/image.jpeg"> 
     <input type="text" name="food" placeholder="insert the food"> 
     </input> <!-- this input has the icon search on the right--> 
    </img> 
<html>

顯然，這是行不通的。有沒有一個好的方法來使它工作？

來源

2016-05-12 raoen

使用CSS背景圖像？ –

將您的輸入放入div中，並將該圖像作爲該div的背景圖像。

來源

2016-05-12 15:13:33

你需要對你的問題更具體。你能上傳一個鏈接嗎？但您也可以將背景圖像添加到輸入類型文本。像這樣：

input {background-image：url（「search_icon.png」）;位置：絕對的; }

來源

2016-05-12 15:28:11 Lucas

對不起。一個新手到stackoverflow – Lucas

這應該爲你做

HTML：

<div class="bg"> 
    <input type="text" name="food" placeholder="insert the food"> 
</div>

CSS：

.bg{ 
    background-image: url("http://lorempixel.com/200/200/"); 
    background-repeat:no-repeat; 
    height:200px; 
    width:200px; 
    line-height:200px; 
    text-align:center; 
}

來源

2016-05-12 15:32:31

將輸入類型文本放在圖像的中心

回答

相關問題