web: Comment placer une boîte de saisie dans une image?

Question

Je veux utiliser une image comme design de mon site web. C'est un simple, comme google.

<img src... done... > 

Maintenant, je veux placer une zone de saisie dans la zone de texte de l'image, comment faire?

Answer 1

La meilleure à mon humble avis d'approche serait d'avoir un <div> avec cette image en arrière-plan et un <input> enfant placé en utilisant les marges, ou absolue positionnement, comme ceci:

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

Answer 2

Ce n'est pas nécessairement un bon design. Pour l'implémenter, vous devez utiliser CSS.

Vous devriez faire un grand récipient <div> et appliquer les règles suivantes:

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