CSS 如何在两个 headers 之间平滑过渡

Question

我有一个包含 header 的项目。这个header由一定的背景颜色和文字颜色组成。这些颜色不适合网站的一部分。所以我想将 header 转换为不同的颜色。但我希望颜色在边界处逐渐变化，而不是立即交换。

headers 应该在进入和离开时在容器的边界处从一种颜色过渡到另一种颜色。但我似乎无法让它发挥作用。

body {
  height: 300rem;
  margin: 0;
  padding: 0;
}

#main-container {
  width: 100%;
  height: 100%;
  background-color: red;
}

#header {
  width: 100%;
  height: 2rem;
  background-color: blue;
  position: sticky;
  top: 0;
}

#someDiv {
  position: relative;
  width: 100%;
  height: 20rem;
  background-color: purple;
  margin-top: 30rem;
}

#headerSomeDiv {
  width: 100%;
  height: 2rem;
  background-color: green;
  color: white;
  position: sticky;
  top: 0;
}

<body>
    <div id="main-container">
        <div id="header">
            <h1>HEADER</h1>
        </div>
        <div id="someDiv">
            <div id="headerSomeDiv">
                <h1>HEADER</h1>
            </div>
        </div>
    </div>
</body>

Answer 1

position:fixed可以做到这一点

body {
  height: 300rem;
  margin: 0;
}

#main-container {
  height: 100%;
  background-color: red;
  clip-path:inset(0); /* to clip the position:fixed to its container */
  overflow:auto;
}

#header,
#headerSomeDiv{
  width: 100%;
  height: 2rem;
  background-color: blue;
  position: fixed;
  top: 0;
}

#headerSomeDiv {
  background-color: green;
  color: white;
}
h1 {
  margin:0;
}
#someDiv {
  position: relative;
  height: 20rem;
  background-color: purple;
  margin-top: 30rem;
  clip-path:inset(0); /* to clip the position:fixed to its container */
}

<body>
  <div id="main-container">
    <div id="header">
      <h1>HEADER</h1>
    </div>
    <div id="someDiv">
      <div id="headerSomeDiv">
        <h1>HEADER</h1>
      </div>
    </div>
  </div>
</body>

CSS 如何在两个 headers 之间平滑过渡

CSS How to smooth transition between two headers

html

css

sticky