Question

我意识到这是一个非常基本的问题。

我目前正在尝试创建一个网站http://theviewbeyond.co.uk/。

我目前正在添加一个联系表单，我已经创建了一个用作表单背景的图片，问题是我无法将表单内的对象（如文本框）移动到图片中。

我尝试过绝对定位，但似乎无法正常工作。

我该怎么做？

form {
margin: 0 auto;
width: 60%;
background-image: url("../IMG/contactpage1[2742].jpg"); 
background-size: cover;

Answer 1

将照片设置为背景：

<div id="container" style='background-image:url("IMG/slidermockup[2710].jpg");'></div>

Answer 2

我正在审核您的网站并查看您的问题，我正在尝试某些样式，并且我认为如果您的容器的图片大小不同，background-image不正确，那么您需要使用{您表单的{1}}和height。

width

在不同的屏幕尺寸中，您需要使用media queries才能使其正常运行。

Answer 3

我已使用fieldset作为补充容器，并使用padding将您的元素放在此处。更改填充值asrequired

＆＃13;

fieldset {
  border: 0;
  padding-top: 400px;
  padding-left: 175px;
}

form {
  margin: 0 auto;
  width: 60%;
  background-image: url("http://theviewbeyond.co.uk/IMG/contactpage1[2742].jpg");
  background-size: cover;
  height: 900px;
}

＆＃13;

<div id="Contact">
  <form>
    <fieldset>
      <input type="text" id="name" placeholder="NAME">
      <input type="text" id="email" placeholder="EMAIL">
      <input type="number" id="number" placeholder="PHONE">
      <input type="text" id="Event" placeholder="Type Of Event">
      <textarea name="message" placeholder="MESSAGE"></textarea>
    </fieldset>
  </form>
</div>

＆＃13;

Arnolds answer也有关于图片大小和媒体查询的有效观点

在HTML表单中定位

3 个答案: