如何在 CSS 中的表单下方定位图像

Question

我正在制作一个登录页面，我会将自定义图像边框定位到表单下方的中心。

图像未正确定位到margin-left。

任何人都可以提出解决方案吗？

下面是代码：

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto);
 * {
  text-align: center;
}
img {
  z-index: -1;
  width: 350px;
  height: 200px;
  margin-top: 200px;
  background-size: cover;
  position: absolute;
}
body {
  background-color: #ecf0f1;
}
#username {
  margin-top: 250px;
  margin-bottom: inherit;
  margin-right: inherit;
  width: 250px;
  height: 35px;
  font-size: 20px;
  font-family: 'Droid Sans', serif;
  border: 0px solid;
  background-color: transparent;
}
#username:focus {
  outline: none;
}
#password {
  margin-top: 5px;
  margin-bottom: inherit;
  margin-right: inherit;
  width: 250px;
  height: 35px;
  font-size: 20px;
  font-family: 'Droid Sans', serif;
  border: 0px solid;
  background-color: transparent;
}
#password:focus {
  outline: none;
}
#submit {
  margin-top: 35px;
  border: 0;
  background: url(submit1.png);
  background-repeat: no-repeat;
  width: 200px;
  height: 50px;
  border: 0;
}
#submit:focus {
  outline: none;
}
#submit:hover {
  background-image: url(submit2.png);
}
#footer {
  clear: both;
  position: relative;
  z-index: 5;
  margin-top: 17em;
  background-color: transparent;
  font-family: 'Roboto', serif;
  color: #bdc3c7;
  height: 20px;
  font-size: 10px;
}

<div id="main">
  <div id="login">
    <form action="Scripts/xxx.php">
      <img src="border_transparent.png">
      <input id="username" type="text" name="username" placeholder="Enter  Username" />
      <br>
      <input id="password" type="password" name="password" placeholder="Enter Secret Password" />
      <br>
      <button id="submit" value="" />
    </form>
  </div>
</div>
<div id="container">
  <div id="content"></div>
</div>
<div id="footer">&copy; Project Blackhat Operatives 2015</div>

这是我的页面目前的外观：http://s7.postimg.org/vvfi8m1uj/Screen_Shot_2015_01_11_at_7_07_21_PM.png

这就是我试图使页面看起来像的样子：http://s11.postimg.org/avy2caylv/Screen_Shot_2015_01_11_at_7_09_01_PM.png

Answer 1

它是居中的，问题是它背后的背景图像是你绝对定位的。这不是居中，您可以添加left: 50%和负边距以将其带回中心（left将其定位在角落而不是中心）：

img {
  z-index: -1;
  width: 350px;
  height: 200px;
  background-size: cover;
  position:absolute;
  left: 50%; //add
  margin: 200px 0 0 -175px; //add
}

小提琴

不过，您应该做的是将该映像作为background-image添加到form或#login容器中。定位img标签并不是处理此问题的好方法。

Answer 2

试试

#submit:hover {
background-image: url("submit2.png");
}

需要引号

/双引号。