我在 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>
对于此问题,只需将
background-repeat
和background-attachment
属性包含为no-repeat
和fixed代码>.然后,将 html 和 body 标记的
height
属性设置为100%
。 类似答案添加了一个
gradient-wrapper
类