2015-11-06 38 views
0

我想做一个网站,在中心有一个背景,它是高度是整个网站,并在背景结束时我想要一个形式,所以我在哪里我放大我们出该网站仍然响应和形式的变化大小为背景,仍然在同一位置制作响应式网站的背景和形式

@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>

回答

0

/缩小,并与变焦时的形式来自这个问题你HTML代码。您在table元素中设置width-属性。通过HTML属性设置元素的width已过时,您应该使用CSS代替。还应该删除alignborder等其他属性。

简单的改变:

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

到:

<table> 

这样的性能应仅适用于CSS来设置。删除这些修复了我的缩放问题(Chrome)。

此外,我认为你在做什么与background-image是不正确的做法。您应该尝试插入包含图像的新div,而不是使用bodybackground-image。同样,当插入div时,您不需要将margin-top添加到表单中。