cari

Rumah  >  Soal Jawab  >  teks badan

Kecerunan latar belakang CSS tidak meliputi keseluruhan halaman (termasuk kandungan boleh tatal)

Saya menghadapi masalah dengan kecerunan latar belakang CSS dalam dokumen HTML saya. Saya mereka halaman yang menggunakan kecerunan linear sebagai latar belakang dan menetapkannya pada elemen badan. Masalah yang saya hadapi ialah kecerunan seolah-olah berakhir di mana skrin pada mulanya berakhir, walaupun terdapat lebih banyak kandungan untuk ditatal. Jadi apabila anda menatal ke bawah, contoh kedua kecerunan kelihatan bermula semula.

Ini ialah kod CSS (SCSS) semasa saya: 

@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);
}

Tingkah laku yang dijangkakan ialah kecerunan sentiasa meliputi keseluruhan skrin, termasuk kandungan yang pada mulanya tidak kelihatan kerana seseorang itu perlu menatal kepadanya. Saya mahu mengelak daripada mempunyai dua kejadian kecerunan. Pada asasnya, kecerunan harus menyesuaikan diri dengan ketinggian skrin dan juga ketinggian skrol.

Saya cuba menggunakan sifat dan nilai CSS yang berbeza seperti ketinggian: auto; ketinggian min: 100% tetapi ini nampaknya tidak berfungsi. Saya juga mencuba tanpa mengulangi tetapi apa yang dilakukannya ialah ia memaparkan segi empat tepat tulis. Sebarang bantuan akan sangat dihargai! Berikut ialah HTML sekiranya anda memerlukannya untuk menghasilkan semula ralat: 

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

Ditunjukkan dalam coretan kod di bawah: 

@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粉506963842444 hari yang lalu682

membalas semua(2)saya akan balas

  • P粉682987577

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

    Untuk soalan ini, ganti sahaja background-repeat 和 background-attachment 属性包含为 no-repeat 和 fixed.然后，将 html 和 body 标记的 height 属性设置为 100%. Jawapan serupa

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

    balas
    0
  • P粉947296325

    P粉9472963252023-09-13 00:58:37

    Menambah gradient-wrapperkelas

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

    balas
    0
  • Batalbalas