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

尝试

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

需要 quotes/double 个引号。

Answer 2

它是居中的，问题是它后面的背景图片你是绝对定位的。这不是居中的，您可以添加 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
}

FIDDLE

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

CSS 如何在表单下方放置图像

How to Position an Image underneath a form in CSS

html

css

web