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>