定位背景图像

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

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

您可以通过在背景线中添加“中心顶部”来定位背景，这样您就可以获得背景：url（images / logo.png）中心顶部无重复;