定位背景图片

Question

因此，我使用以下html标记了一个简单的登录表单;

<form> 
    <label>Username:</label> 
     <input type="text" name="username" required="required" /> 
    <label>Password:</label> 
     <input type="password" name="password" required="required" /> 
     <input type="submit" value="Login" name="submit" class="submit" /> 

，我已经给它下面的造型;

form { 
background:url(images/logo.png) no-repeat; 
width: 250px; 
padding: 20px; 
padding-top:120px; 
margin: 200px auto; 
-webkit-border-radius: 1em; 
-moz-border-radius: 1em; 
border-radius: 1em; 
border: 1px solid #DDD; 

/*** Shadow behind the box ***/ 
-moz-box-shadow:0px 2px 5px #e0e0e0; 
-webkit-box-shadow:0px 2px 5px #e0e0e0; 

}

一切正常，除了我的背景图像的定位，我想在窗体顶部为中心的计划。目前位于左上角。只是想知道是否有解决方法除了创建一个单独的图像的div？

Answer 1

background-position：top center;

Answer 2

你的意思是将背景定位到表单背景的中心？ 那么背景的位置呢？

您可以通过添加“center top”背景线来定位背景，以便获取背景：url（images/logo.png）center top no-repeat;