使用 CSS 在 header 中滚动渐变

Question

我正在尝试让我的网站 header 显示滚动渐变（想象向下滚动时太阳升起）。把梯度调上来没问题；

#header {
  height: 200px;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}

<div id="header"></div>

但是在移动页面时让它滚动是个问题。我发现几个指南告诉添加；

  background-size: 400px;
  background-attachment: fixed;

作为；

    #header {
  height: 200px;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
  background-size: 400px;
  background-attachment: fixed;
}

然而，这会使 header 完全变暗。我错过了什么？

Answer 1

您可以通过在 body 上应用背景着色并保持 header 透明来模拟这一点：

#header {
  height: 100px;
  position:fixed;
  left:0;
  right:0;
  top: 0;
  border:3px solid green;
  box-sizing:border-box;
  
}

body {
  min-height:200vh;
  background: 
    linear-gradient(to bottom, transparent 100px,#fff 100px) fixed,
    linear-gradient(to bottom, red, blue);
}

<div id="header"></div>

使用 CSS 在 header 中滚动渐变

Scrolling gradient in header using CSS

css

linear-gradients