Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Der CSS-Hintergrundverlauf deckt nicht die gesamte Seite ab (einschließlich scrollbarer Inhalte).
P粉506963842
P粉506963842 2023-09-12 13:20:09
0
2
678

Ich habe Probleme mit dem CSS-Hintergrundverlauf in meinem HTML-Dokument. Ich habe eine Seite entworfen, die einen linearen Farbverlauf als Hintergrund verwendet und ihn auf das Körperelement setzt. Das Problem, mit dem ich konfrontiert bin, besteht darin, dass der Farbverlauf dort zu enden scheint, wo der Bildschirm ursprünglich endet, obwohl mehr Inhalt zum Scrollen vorhanden ist. Wenn Sie also nach unten scrollen, scheint die zweite Instanz des Farbverlaufs von vorne zu beginnen.

Dies ist mein aktueller CSS-Code (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);
}

Das erwartete Verhalten besteht darin, dass der Farbverlauf immer den gesamten Bildschirm abdeckt, einschließlich Inhalten, die zunächst nicht sichtbar sind, weil man dorthin scrollen muss. Ich möchte vermeiden, dass es zwei Instanzen eines Farbverlaufs gibt. Im Wesentlichen sollte sich der Farbverlauf an die Höhe des Bildschirms und sogar an die Höhe des Scrolls anpassen.

Ich habe versucht, verschiedene CSS-Eigenschaften und -Werte wie height: auto; min-height: 100 % zu verwenden, aber diese scheinen nicht zu funktionieren. Ich habe es auch versucht, ohne es zu wiederholen, aber es zeigt ein Schreibrechteck an. Jede Hilfe wäre sehr dankbar! Hier ist der HTML-Code, falls Sie ihn benötigen, um den Fehler zu reproduzieren: 

<!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>

Demonstriert im folgenden Codeausschnitt: 

@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

Antworte allen(2)
P粉682987577
P粉6829875772023-09-13 12:03:46 2 Etage

对于此问题，只需将 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>
Wie +0
Antwort hinzufügen
P粉947296325
P粉9472963252023-09-13 00:58:37 1 Etage

添加了一个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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage