我在 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
類別