web:如何在图片中放置输入框?

时间:2010-05-28 14:32:03

标签: html webforms input

我想用图片作为我的网站设计。这很简单,就像谷歌一样。

<img src... done... >

现在,我想在图片的文字区域放置一个输入框,我该怎么做?

2 个答案:

答案 0 :(得分:2)

这不一定是一个好的设计。

要实现它,您需要使用CSS。

您应该制作一个大容器<div>并应用以下规则:

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

答案 1 :(得分:2)

最好的方法是恕我直言,<div>将该图像作为背景,一个<input>子项使用边距或绝对定位,如下所示:

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