在HTMLCSS中重新创建这个登录页面时遇到了麻烦。

问题描述 投票：0回答：1

我正试图创建一个基于以下内容的登录页面 这个 一个用HTML和CSS制作的。当然，我的logo会有所不同，而且我正试图给背景图片增加一些透明度。

我是网页开发的新手，但我不认为这太复杂。这只是一张背景图，用一个div横跨屏幕来放置用户名和密码栏。

我已经把我目前所掌握的东西放到了这个JSFiddle中。https:/jsfiddle.net6eLuw2th。

这是代码。

body {
	opacity: 0.2;
	background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
	background-size:cover;
	z-index: -1;
}

form {
	border: 3px solid #f1f1f1;
	z-index: 0;
}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  z-index: 0;
}

button {
  background-color: #8C1515;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  font-size: 15px;
  width: 100%;
  z-index: 0;
}

button:hover {
  opacity: 0.8;
  z-index: 0;
}

.container {
  padding: 16px;
  z-index: 0;
}

span.psw {
  float: right;
  padding-top: 16px;
  z-index: 0;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: left;
     width: 100%;
	 z-index: 0;
  }
}
<!DOCTYPE html>

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="login.css" />
  </head>

  <body>
    <form action="/action_page.php" method="post">
      <div class="container">
        <label for="uname"><b>Username</b></label>
        <input type="text" placeholder="Enter Username" name="uname" required>
        <label for="psw"><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="psw" required>
        <button type="submit">Login</button>
        <label>
          <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
      </div>
    </form>
  </body>

</html>

正如你所看到的，用户名密码的内容似乎在图片后面（即使背景的z-index是-1）。我确实想让背景看起来稍微透明一些，但也遇到了一些麻烦。此外，我的用户名和密码栏横跨整个屏幕；我希望它们更像我试图重新创建的示例页面，登录信息栏限制在屏幕的中间。

如果有任何帮助或建议，我们将非常感激。

html css
1个回答
1
投票

其实你所面临的问题不是关于 z-index.问题是，你有 opacity:0.2 设置在主体上，这就是为什么它看起来很奇怪。

body {
    opacity: 0.2; /* just remove this line */
    background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
    background-size:cover;
    z-index: -1;
}

我还修改了表格的宽度和居中。

form {
    border: 3px solid #f1f1f1;
    z-index: 0;
  width: 60%;
  margin: 0 auto;
}

label {
  color: #FFF;
}

这里是一个工作片段。

body {
	background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
	background-size:cover;
	z-index: -1;
}

form {
	border: 3px solid #f1f1f1;
	z-index: 0;
  width: 60%;
  margin: 0 auto;
}

label {
  color: #FFF;
}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  z-index: 0;
}

button {
  background-color: #8C1515;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  font-size: 15px;
  width: 100%;
  z-index: 0;
}

button:hover {
  opacity: 0.8;
  z-index: 0;
}

.container {
  padding: 16px;
  z-index: 0;
}

span.psw {
  float: right;
  padding-top: 16px;
  z-index: 0;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: left;
     width: 100%;
	 z-index: 0;
  }
}
<!DOCTYPE html>

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="login.css" />
  </head>

  <body>
    <form action="/action_page.php" method="post">
      <div class="container">
        <label for="uname"><b>Username</b></label>
        <input type="text" placeholder="Enter Username" name="uname" required>
        <label for="psw"><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="psw" required>
        <button type="submit">Login</button>
        <label>
          <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
      </div>
    </form>
  </body>

</html>
1
投票

1) 你没有加载一个渐变的背景。你正在加载一个实体背景，并试图淡化主体，它淡化了主体内的所有东西，包括你的表单。

2）在CSS中去掉你的INPUT部分的 "width=100%"，它就不会在屏幕上拉伸。

1
投票

Body不透明度会影响body中的所有内容，所以不要在那里做.而是把背景图片放在一个div中。

<div id="background"></div>

然后是它的css

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    opacity: 0.8;
    filter:alpha(opacity=80);
}

对于输入字段，确保宽度不要为100%。

如果你想有专栏，那就看看吧。https:/www.w3schools.comhowtohowto_css_three_columns.asp

1
投票

/*
  Make the background in a div
*/
.bg {
	width: 100%;
	height: 100%;
	position: fixed;
	background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
  background-position: center;
  background-repeat: no-repeat;
	opacity: 0.2;
  z-index: -1;
}

form {
	border: 3px solid #f1f1f1;
}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;

}

button {
  background-color: #8C1515;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  font-size: 15px;
  width: 100%;

}

button:hover {
  opacity: 0.8;

}

.container {
  padding: 16px;

}

span.psw {
  float: right;
  padding-top: 16px;

}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: left;
     width: 100%;
  }
}
<!DOCTYPE html>

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="login.css" />
  </head>

  <body>
    <!-- the div that contains the background -->
    <div class="bg"></div>
    <form action="/action_page.php" method="post">
      <div class="container">
        <label for="uname"><b>Username</b></label>
        <input type="text" placeholder="Enter Username" name="uname" required>
        <label for="psw"><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="psw" required>
        <button type="submit">Login</button>
        <label>
          <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
      </div>
    </form>
  </body>

</html>
1
投票

请看你想要实现的效果的代码片段。

body {
  background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
  background-size: cover;
}

form {
  border: 3px solid #f1f1f1;
}

input[type=text],
input[type=password] {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #8C1515;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  font-size: 15px;
  width: 50%;
}

button:hover {
  opacity: 0.8;
}

.container {
  padding: 16px 16px 16px 180px;
  background-color: rgba(238, 238, 238, 0.3);
  ;
}

span.psw {
  float: right;
  padding-top: 16px;
}


/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: left;
    width: 100%;
  }
}
<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" type="text/css" href="login.css" />
</head>

<body>
  <form action="/action_page.php" method="post">
    <div class="container">
      <label for="uname"><b>Username</b></label><br>
      <input type="text" placeholder="Enter Username" name="uname" required><br>
      <label for="psw"><b>Password</b></label><br>
      <input type="password" placeholder="Enter Password" name="psw" required>
      <button type="submit">Login</button><br>
      <label>
          <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
    </div>
  </form>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.