Веб: Как я могу разместить поле ввода на картинке?

Question

Я хочу использовать картинку в качестве дизайна моего сайта. Это простой, как у Google.

<img src... done... >

Теперь я хочу поместить поле ввода в текстовую область изображения, как это сделать?

Answer 1

Наилучшим подходом IMHO было бы иметь <div> с этим изображением в качестве фона и одним <input> дочерним, расположенным с использованием полей или абсолютного позиционирования, например:

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