如何通过向下滚动页面使线性渐变一致

Question

我有以下html页面：

<!DOCTYPE html>
<html lang="en">

<head>

    <style>
        html,body {
        height: 100%;
        }

        body {
        margin: 0;
        }
    </style>

</head>

<body style="margin: 0 auto;text-align:center;background: linear-gradient(to bottom, #243B55, #141E30);">

    <p style="font-family: Montserrat; font-style: normal; font-weight: bold; color: rgba(255, 255, 255, 0.92);font-size: 30px;">Text</p>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>

    
</body>

</html>

我知道我在样式标签中添加的 CSS 负责在您滚动页面时使线性渐变“重复”，但是有没有办法使线性渐变背景在整个滚动过程中保持一致，而无需删除现有的 CSS（我愿意添加 CSS），因为我知道我需要现有的 CSS 来做其他事情？

Answer 1

您需要使要设置背景的元素的高度等于文档的全高

你的想法是对的，你只需要改变

如果属性height: 100%; 确实需要，您可以添加一个包装器并将其添加到其中。

// from
html,body {
   height: 100%;
}

//to
html,body {
   height: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>

    <style>
        html,body {
          height: auto;
        }
        
        .wrapper {
          height: 100%;
        }

        body {
          margin: 0;
        }
    </style>

</head>

<body style="margin: 0 auto;text-align:center;background: linear-gradient(to bottom, #243B55, #141E30);">

    <div class="wrapper">
      <p style="font-family: Montserrat; font-style: normal; font-weight: bold; color: rgba(255, 255, 255, 0.92);font-size: 30px;">Text</p>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
    
    </div>

    
</body>

</html>