Put Eingabe Text in der Mitte eines Bildes

Ich muss eine HTML-Seite erstellen. In dieser HTML-Seite muss ich ein Bild mit einem <input type="text "/> haben. Diese Eingabe befindet sich in der Mitte des Bildes. Dieser Text des Eingabetyps enthält auch das Symbol "Suchen" in der Eingabe rechts.Put Eingabe Text in der Mitte eines Bildes

Ich habe versucht, den Code auf diese Weise zu bauen:

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

Offensichtlich funktioniert es nicht. Gibt es einen guten Weg, es zum Laufen zu bringen?

Quelle

2016-05-12 raoen

Verwendung CSS background-image? –

Setzen Sie Ihre Eingabe in ein div und machen Sie das Bild zum Hintergrundbild dieses div.

Quelle

2016-05-12 15:13:33

Sie müssen genauer mit Ihrer Frage sein. Kannst du einen Link hochladen? Sie fügen aber auch ein Hintergrundbild zum Text des Eingabetyps hinzu. Etwas wie dieses:

Eingang {background-image: url ("search_icon.png"); Position: absolut; }

Quelle

2016-05-12 15:28:11 Lucas

tut mir leid. ein Neuling zum Stackoverflow – Lucas

Dies sollte es für Sie tun

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

Quelle

2016-05-12 15:32:31

Put Eingabe Text in der Mitte eines Bildes

Antwort

Verwandte Themen