达到一定高度后停止线性渐变

Question

我正在尝试使用 CSS 添加渐变到我的背景。我希望这个渐变不是“固定”的，而是随页面滚动。对于非常高的页面，我只想结束渐变。

这是我的CSS：

body {
  min-height: 100%;
  background-color: #F00;
  background-repeat: no-repeat;
  background: linear-gradient(
    180deg,
    #F00 0px,
    #0F0,
    #00F,
    #F00 3000px
  )
}

问题是，当我向下滚动时，页面折叠后渐变会重新开始。在我 1200px 高度的屏幕上，它永远不会变成蓝色。

我的目标是渐变渲染一次，如果页面大于渐变（假设 3000px），它就永远是

#F00

。不重复没有效果。

Codepen供参考.

Answer 1

您可以分别设置背景图像和背景颜色。

document.addEventListener('DOMContentLoaded', () => {
  const p = document.getElementsByTagName('p')[0];

  console.log(p)
  for (let i = 0; i < 1000; i++) {
    document.body.appendChild(p.cloneNode(true));
  }

});

body {
  min-height: 100%;
  background-color: #F00;
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg, #F00 0px, #0F0, #00F, #F00 3000px);
  background-size: 100% 3000px;
}

<p>Long line test</p>