CSS如何平滑两个标题之间的过渡

史提芬

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

进出容器时，标头应在容器的边界从一种颜色转换为另一种颜色。但是我似乎没有使它起作用。

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>

陪同Afif

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。