css 滚动效果(背景渐变)

093gszye 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(244)

我尝试在这段代码上而不是文本上做背景滚动。
这意味着带有剪切的文本保持在原来的位置，而背景在页面中滚动到它的后面
我该怎么解决这个问题呢？
codepen上的示例：

body {
  margin: 0;
  background-color: #000;
}

.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.container {
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250vh;
  font-size: 96px;
  background: linear-gradient(
    #000 0%,
    #66458e 40%,
    #fff 50%,
    #66458e 75%,
    #000 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-attachment: fixed;
}

.text {
  text-align: center;
}

<div class="page">
  <div class="container">
    <div class="content">
      <h1 class="text">TEST</h1>
    </div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75099466/scroll-effect-background-gradient

1条答案

按热度按时间

qojgxg4l1#

实现这一点的方法是使用一个带有线性渐变的背景div，然后使用position覆盖h1元素：修复以停止文本滚动。
您可以使用混合混合模式，而不是使用背景剪辑文本：与白色文本相乘以使背景穿过文本。然后我使用了一个方框阴影来遮蔽h1元素之外的剩余背景。见下文

body {
  margin: 0;
  background-color: #000;
}

.content {
  height: 250vh;
  background: linear-gradient(
    #000 0%,
    #66458e 40%,
    #fff 50%,
    #66458e 75%,
    #000 100%
  );
}

.text {
  margin:0;
  position: fixed;
  font-size: 8rem;
  font-weight: bold;
  left:50%;
  top:50%;
  box-shadow: 0px 0px 0px 200vh black;
  color:white;
  background-color: black;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%);
}

<div class="content">
  <h1 class="text">TEST</h1>
</div>

赞(0）回复(0）举报 2023-01-14

我来回答

css 滚动效果(背景渐变)

1条答案

相关问题

热门标签

最新问答