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");
}

需要引号/双引号。

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中的表单下放置图像

2 个答案: