CSS 背景渐变不覆盖整个页面（包括可滚动内容）
我在 HTML 文档中遇到 CSS 背景渐变问题。我设计了一个使用线性渐变作为背景的页面，并将其设置在 body 元素上。我面临的问题是，渐变似乎在屏幕最初结束的地方结束，即使有更多内容需要滚动。因此，当您向下滚动时，渐变的第二个实例似乎会重新开始。
这是我当前的 CSS (SCSS) 代码：
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body {
min-height: 100vh;
background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100));
color: whitesmoke;
font-family: 'Poppins', sans-serif;
}
img {
max-width: 28%;
border-radius: 50%;
}
.container {
height: auto;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 0.25fr 3fr;
gap: 3%;
padding: 3%;
box-sizing: border-box;
}
.content-left, .content-right {
display: flex;
align-items: center;
justify-content: center;
}
.slogan {
grid-column: span 2;
font-size: 1.5em;
display: flex;
align-items: top;
justify-content: center;
text-transform: uppercase;
letter-spacing: 2px;
}
.container-form {
height: auto;
grid-column: span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 30px; // Add space at the bottom
}
input, textarea, select {
border: 2px solid whitesmoke;
background-color: rgba(255, 255, 255, 0.1);
color: whitesmoke;
}
input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) {
border: 2px solid red;
}
input:invalid:focus:not(:placeholder-shown), textarea:invalid:focus:not(:placeholder-shown) {
outline: none;
}
input:invalid:not(:placeholder-shown)::placeholder, textarea:invalid:not(:placeholder-shown)::placeholder {
color: red;
}
#register-form:invalid:not(:placeholder-shown) ~ #popup {
display: block;
}
button, input[type=submit] {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
transition: background-color 0.3s ease;
}
button:hover, input[type=submit]:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.form-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.form-control {
background-color: transparent !important;
color: whitesmoke !important;
border-color: whitesmoke;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
width: 100%;
}
#login-button {
background-color: transparent;
border: 2px solid whitesmoke;
color: whitesmoke;
}
#login-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
预期的行为是渐变始终覆盖整个屏幕，包括最初不可见的内容，因为必须滚动到它。我想避免有两个渐变实例。本质上，渐变应该适应屏幕的高度，甚至滚动的高度。
我尝试使用不同的 CSS 属性和值，例如 height: auto;最小高度：100%；但这些似乎不起作用。我也尝试过不重复，但它的作用是显示一个写入矩形。任何帮助，将不胜感激！ 以下是 HTML，以防您需要它来重现错误：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Register</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" href="../assets/icons/social.png"/>
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/register.css">
</head>
<body>
<div class="container">
<div class="content-left">
<img src="../assets/images/logo.jpeg" alt="logo">
</div>
<div class="content-right">
<h1>Stockify</h1>
</div>
<div class="slogan">
<h2>The smart way</h2>
</div>
<div class="container-form">
<form id="register-form" action="index.html" class="form-container">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number:</label>
<input type="tel" id="phone" name="phone" class="form-control">
</div>
<div class="mb-3">
<label for="subscription" class="form-label">Subscription Plan:</label>
<select id="subscription" name="subscription" class="form-control" required></select>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="button-container">
<button id="login-button" class="btn btn-primary" type="button" onclick="redirectToLogin()">Login</button>
<input type="submit" value="Register" onclick=sendLoginRequest() class="btn btn-primary">
</div>
</form>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
<script src="../javascript/register.js"></script>
<script src="../javascript/cookie.js"></script>
</body>
</html>
下面的代码片段中的演示：
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body {
min-height: 100vh;
background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100));
color: whitesmoke;
font-family: 'Poppins', sans-serif;
}
img {
max-width: 28%;
border-radius: 50%;
}
.container {
height: auto;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 0.25fr 3fr;
gap: 3%;
padding: 3%;
box-sizing: border-box;
}
.content-left,
.content-right {
display: flex;
align-items: center;
justify-content: center;
}
.slogan {
grid-column: span 2;
font-size: 1.5em;
display: flex;
align-items: top;
justify-content: center;
text-transform: uppercase;
letter-spacing: 2px;
}
.container-form {
height: auto;
grid-column: span 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 30px; // Add space at the bottom
}
input,
textarea,
select {
border: 2px solid whitesmoke;
background-color: rgba(255, 255, 255, 0.1);
color: whitesmoke;
}
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
border: 2px solid red;
}
input:invalid:focus:not(:placeholder-shown),
textarea:invalid:focus:not(:placeholder-shown) {
outline: none;
}
input:invalid:not(:placeholder-shown)::placeholder,
textarea:invalid:not(:placeholder-shown)::placeholder {
color: red;
}
#register-form:invalid:not(:placeholder-shown)~#popup {
display: block;
}
button,
input[type=submit] {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
transition: background-color 0.3s ease;
}
button:hover,
input[type=submit]:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.form-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.form-control {
background-color: transparent !important;
color: whitesmoke !important;
border-color: whitesmoke;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.button-container {
display: flex;
justify-content: space-between;
gap: 10px;
width: 100%;
}
#login-button {
background-color: transparent;
border: 2px solid whitesmoke;
color: whitesmoke;
}
#login-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<div class="container">
<div class="content-left">
<img src="../assets/images/logo.jpeg" alt="logo">
</div>
<div class="content-right">
<h1>Stockify</h1>
</div>
<div class="slogan">
<h2>The smart way</h2>
</div>
<div class="container-form">
<form id="register-form" action="index.html" class="form-container">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number:</label>
<input type="tel" id="phone" name="phone" class="form-control">
</div>
<div class="mb-3">
<label for="subscription" class="form-label">Subscription Plan:</label>
<select id="subscription" name="subscription" class="form-control" required></select>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="button-container">
<button id="login-button" class="btn btn-primary" type="button" onclick="redirectToLogin()">Login</button>
<input type="submit" value="Register" onclick=sendLoginRequest() class="btn btn-primary">
</div>
</form>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
