css - 使用 CSS 在标题中滚动渐变

Question

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

#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;
}

然而，这会使标题变暗。我错过了什么？

Answer 1

您可以通过在正文上应用背景色并保持标题透明来模拟这一点:

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