html - 制作具有背景和形式的响应式网站

Question

我想制作一个在中心有背景的网站，它的高度是整个网站，在背景的末尾我想调整一个表格，所以我放大我们的网站仍然响应并且表格随着背景改变大小并仍然在相同的位置

@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Exo:100,200,400);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);
html, body {
  height:4400px;
  width: 100%;
}

*
{
  margin:0;
  padding:0;
}
body
{
  background-color: white;
  background-image: url(images/myimage.jpg);
  background-size: auto 100%;

  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
}


#login-form
{
  margin-top: 3700px;
  position: relative;

}
table
{
  padding:10px;
  background: transparent  ;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
table tr,td
{
  padding:2px;
  //border:solid #e1e1e1 1px;
}
table tr td input[type=text]
{
  width:97%;
  height:45px;
  border:solid #e1e1e1 1px;
  border-radius:3px;
  padding-left:10px;
  font-family:'Exo', sans-serif;
  font-size:16px;
  background: transparent  ;

  transition-duration:0.5s;
  box-shadow: inset 0px 0px 1px rgba(0,0,0,0.4);
}
textarea {
  width: 97%;
  height: 135px;
  resize: none;
  border:solid #e1e1e1 1px;
  border-radius:3px;
  padding-left:10px;
  font-family:'Exo', sans-serif;
  font-size:16px;
  background: transparent  ;
  color: #909


    transition-duration:0.5s;
  box-shadow: inset 0px 0px 1px rgba(0,0,0,0.4);
}
table tr td input[type=checkbox]
{
  width:5%;
  height:15px;

}

table tr td input[type=submit]
{
  width:100%;
  height:45px;
  border:solid #e1e1e1 1px;
  border-radius:3px;
  padding-left:10px;
  font-family:'Exo', sans-serif;
  font-size:20px;
  background: #128195  ;
  color: #e63b5f;

  transition-duration:0.5s;
  box-shadow: inset 0px 0px 1px rgba(0,0,0,0.4);
}

table tr td button
{
  width:100%;
  height:45px;
  border:0px;
  background:rgba(12,45,78,11);
  background:-moz-linear-gradient(top, #595959 , #515151);
  border-radius:3px;
  box-shadow: 1px 1px 1px rgba(1,0,0,0.2);
  color:#f9f9f9;
  font-family:'Exo', sans-serif;
  font-size:18px;
  font-weight:bolder;
  text-transform:uppercase;
}
table tr td button:active
{
  position:relative;
  top:1px;
}
table tr td a
{
  text-decoration:none;
  color:#00a2d1;
  font-family:'Exo', sans-serif;
  font-size:18px;
}
label
{
  height: auto;
  text-decoration:none;
  color:#00a2d1;
  font-family:'Exo', sans-serif;
  font-size:18px;
}

<div id="thesite">
  <center>
    <div id="login-form">
      <form action="" method="post">
        <table align="center" width="30%" border="0">
          <tr>
            <td><input class='inputs' type="text" placeholder="Full Name" name="first_name"></td>
          </tr>
          <tr>
            <td><input class='inputs' type="text" placeholder="Enter your Email" name="email"></td>
          </tr>
          <tr>
            <td><textarea  name="message" placeholder="Enter your Order"></textarea></td>
          </tr>
          <tr>
            <td><label><input type="checkbox" name="copy" value="value1">Send me copy from the order</label></td>
          </tr>
          <tr>
            <td><input type="submit" name="submit" value="Submit"></td>
          </tr>
        </table>
      </form>
    </div>
  </center>
</div>

Answer 1

放大/缩小表单时出现的问题来自您的 HTML 代码。您在 table 元素中设置 width 属性。通过 HTML 属性设置元素的 width 已经过时，您应该改用 CSS。还应删除其他属性，如 align 和 border。

只需更改:

<table align="center" width="30%" border="0">

到:

<table>

此类属性只能使用 CSS 设置。删除那些解决了我(Chrome)的缩放问题。

此外，我认为您对 background-image 所做的操作不是正确的方法。您应该尝试插入一个包含图像的新 div，而不是使用 body 的 background-image。此外，当插入 div 时，您不再需要向表单添加 margin-top。