搜索

首页  >  问答  >  正文

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>

P粉506963842P粉506963842440 天前675

全部回复(2)我来回复

  • P粉682987577

    P粉6829875772023-09-13 12:03:46

    对于此问题，只需将 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

    添加了一个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
  • 取消回复