社群 學習 工具庫 休閒
搜尋
繁体中文
CSS 背景漸層不會覆蓋整個頁面（包括可捲動內容）
P粉506963842
P粉506963842 2023-09-12 13:20:09
0
2
703

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

P粉506963842
P粉506963842

全部回覆(2)
P粉682987577
P粉6829875772023-09-13 12:03:46 2樓

對於此問題，只需將background-repeat 和background-attachment 屬性包含為no-repeat 和fixed代码>.然後，將html 和body 標記的height 屬性設為100%。 類似答案

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
html {
  height: 100%;
}
body {
  background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100)) no-repeat;
  background-size: cover;
  color: whitesmoke;
  font-family: 'Poppins', sans-serif;
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

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>
點贊 +0
新增回覆
P粉947296325
P粉9472963252023-09-13 00:58:37 1樓

新增了一個gradient-wrapper類別

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
body {
  margin: 0;
  color: whitesmoke;
  font-family: 'Poppins', sans-serif;
}

.gradient-wrapper {
  min-height: 100vh;
  /* Set the wrapper to cover the entire viewport */
  background: linear-gradient(to bottom, rgb(10, 25, 47), rgb(44, 83, 100));
  background-attachment: fixed;
  /* Fix the background gradient */
  overflow: auto;
  /* Enable scrolling on the wrapper */
}

.container {
  height: 100%;
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 0.25fr 3fr;
  gap: 3%;
  padding: 3%;
  box-sizing: border-box;
}

img {
  max-width: 28%;
  border-radius: 50%;
}

.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="gradient-wrapper">
  <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>
</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>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板