Question

我使用 HTML、CSS 创建了一个登录表单，背景图像在图像下方有空白。

但是，当我更改屏幕大小时，图像下方有空白。

如果你看这张图片，它应该是这样的：

这里还有背景图片和网站包装的脚本：

@import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";

html, body {min-height: 100%;}
body {
    font-family: sans-serif;    
  background-image: url(assets/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
    overflow: hidden;
}

.container {
    width: 380px;
    margin:7% auto;
    border-radius: 25px;
    background-color: rgba(0,0,0,0.1);
    box-shadow: 0 0 17px #333;
}

.header {
    text-align: center;
    padding-top: 75px;
}

.header h1 {
    color: #333;
    font-size: 45px;
    margin-bottom: 80px;
}

.main {
    text-align: center;
}

.main input, button {
    width: 300px;
    height: 40px;
    border:none;
    outline: none;
    padding-left: 40px;
    box-sizing: border-box;
    font-size: 15px;
    color: #333;
    margin-bottom: 40px;
}

.main button {
    padding-left: 0;
    background-color: #83acf1;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 70px;
}

.main button:hover {
    box-shadow: 2px 2px 5px #555;
    background-color: #7799d4;
}
.main input:hover {
    box-shadow: 2px 2px 5px #555;
    background-color: #ddd;
}

.main span {
    position: relative;
}

.main i {
    position: absolute;
    left: 15px;
    color: #333;
    font-size: 16px;
    top: 2px;
}

<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
 <div class="container">
    <div class="header">
        <h1><b>login</b></h1>
    </div>
    <div class="main">
        <form #loginForm="ngForm" (ngSubmit)="login(loginForm)">

    <div class="row" *ngIf="authError">
                <div class="col-12 alert alert-danger">{{ authError?.message }}</div>
            </div>

            <span>
                <i class="fas fa-user"></i>
                <input  ngModel #email="ngModel" placeholder="Email" name="email" type="email">
            </span><br>
            <span>
                <i class="fas fa-lock"></i>
                <input  ngModel #password="ngModel" placeholder="Password" name="password" type="password">
            </span><br>

                <button type="submit">login</button>

         <a  style=" text-align:center; display:block;" href="/register">Click here to register</a>

        </form>
    </div>
 </div>
</body>
</html>

This is my screenshot

Answer 1

尝试将背景图像放在 .container div 中。并将高度设置为 100vh。由于它是一个登录页面，用户不需要向下滚动。它应该是这样的：

.container{
  background-image: url(assets/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

当屏幕尺寸改变时，响应式登录的背景图片不适合

1 个答案: