主页 / coding / 问题 / 78170601
Accepted
Evert
Asked: 2024-03-16 12:28:03 +0800 CST

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

  • 772

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

这是我的CSS：

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

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

我的目标是渐变渲染一次，如果页面大于渐变（假设 3000px），它就永远渲染#F00。不重复没有效果。

Codepen供参考。

html

2 个回答

  1. Best Answer

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

    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>

    • 1

  2. 您的代码很好，但您面临着 html 元素的后台传播。向 html 添加任何背景颜色来解决此问题，并且您不需要设置background-repeat或background-size或background-color到 body 元素

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

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

});
    html {
  height: 100%;
  background: #fff; /* added this */
}

body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(#F00, #0F0, #00F, #F00 3000px);
}
    <p>Long line test</p>

    • 0

相关问题