在bg重叠时将文本颜色变为黑色

Question

我有一个div与背景颜色渐变绝对定位.我有这个文本,当我向上滚动文本时,我想要更改为白色.

我正在使用'mix-blend-mode'属性来实现此目的,但我找不到任何将文本从黑色变为白色的设置.有没有人以前做过这个或者能想到我能做的伎俩？

.bg-container {
  position: fixed;
  top: -30px;
  left: 0;
  width: 100px;
  height: 100px;
}

.gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
  transform: skewY(-15deg);
}

.scroll-content {
  position: absolute;
  top: 50px;
}

.scroll-content p {
  color: #000;
  mix-blend-mode: overlay;
}

/*hack for iOS*/
.scroll-content p:after{
    content: '\200c'
}

<div class="bg-container">
  <div class="gradient-background">
    &nbsp;
  </div>
</div>
<div class="scroll-content">
  <p> abc 1 </p>
  <p> abc 2 </p>
  <p> abc 3 </p>
  <p> abc 4 </p>
  <p> abc 5 </p>
  <p> abc 6 </p>
  <p> abc 7 </p>
  <p> abc 8 </p>
  <p> abc 9 </p>
  <p> abc 10 </p>
  <p> abc 11 </p>
  <p> abc 12 </p>
  <p> abc 13 </p>
  <p> abc 14 </p>
  <p> abc 15 </p>
  <p> abc 16 </p>
  <p> abc 17 </p>
  <p> abc 18 </p>
  <p> abc 19 </p>
</div>

*编辑1:更改了我的示例snipet代码.背景渐变不仅仅是一个矩形div.它倾斜了一点,这就是它如此困难的原因.因此,文字在边界处变成了两个色调.

*为清晰起见编辑2:我希望文本在白色背景时为黑色(#000实体),在文本超过渐变/图像时为白色(#FFF实体).我的内容是可滚动的文本,如代码示例中所示.

*编辑3:iOS Safari不兼容,除非您执行以下操作.将零宽度空间添加&#8203 ;到每个文本元素以使其工作.这可以通过我在CSS标记中添加的CSS属性轻松完成.

Answer 1

您可以使用渐变为文本着色。诀窍是使该渐变与您的形状相似（形状的边缘具有相同的度数和颜色变化）。由于倾斜元素是固定的，因此您需要使渐变也固定，以创建文本滚动的神奇效果：

.gradient-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
  transform: skewY(-15deg);
  transform-origin:left;
}

.scroll-content {
  position: absolute;
  top: 50px;
  /* 165deg = 180deg - 15deg   */
  background: linear-gradient(165deg, #fff 195px,#000 195px) fixed;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

<div class="gradient-background">
</div>
<div class="scroll-content">
  <p> abc 1 </p>
  <p> abc 2 </p>
  <p> abc 3 </p>
  <p> abc 4 </p>
  <p> abc 5 </p>
  <p> abc 6 </p>
  <p> abc 7 </p>
  <p> abc 8 </p>
  <p> abc 9 </p>
  <p> abc 10 </p>
  <p> abc 11 </p>
  <p> abc 12 </p>
  <p> abc 13 </p>
  <p> abc 14 </p>
  <p> abc 15 </p>
  <p> abc 16 </p>
  <p> abc 17 </p>
  <p> abc 18 </p>
  <p> abc 19 </p>
</div>