定位背景圖片

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;