在bg重叠时将文本颜色从黑色更改为白色 [英] Change text color black to white on overlap of bg

问题描述

我有一个div，它的背景颜色渐变是绝对定位的.我上面有这个文本，我想在向上滚动文本时将其更改为白色.

I have a div that is positioned absolute with a background color gradient. I have this text on it that I want to change to the color white as I scroll the text up.

我目前正在使用'mix-blend-mode'属性来实现此目的，但是我找不到任何将文本从黑色变为白色的设置.有没有人做过这件事，或者可以想到我可以做的一件事?

I'm using the 'mix-blend-mode' property to achieve this currently but I can't find any setting that will turn the text from black to white. Has anyone done this before or can think of a trick I can do?

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

* edit 1:更改了我的示例代码片段.背景渐变不仅仅是矩形div.它有点倾斜了，这就是为什么这么难.因此，文本在边界处变成了两色.

*edit 1: Changed my example snipet code. The background gradient isn't just a rectangular div. It's slanted a bit and that's what makes it so difficult. So the text becomes two-toned at the boundary.

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

*edit 2 for clarity: I want the text to be black (#000 solid) when it is over the white background and white (#FFF solid) when it is over the gradient/image. My content is scroll-able text as in the code example.

* edit 3:除非您执行以下操作，否则不兼容iOS Safari.为每个文本元素添加零宽度空间&#8203 ;，以使其起作用.正如我在CSS标记中显示的那样，可以使用CSS属性轻松完成此操作.

*edit 3: iOS Safari incompatible unless you do the following hack. Add the zero width space &#8203 ; to every text element in order to make it work. This can be done easily with a CSS property as i show added in the CSS markup.

推荐答案

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

You can use gradient to color the text. The trick is to have this gradient similar to your shape (same degree and coloration change at the edge of the shape). Since your skewed element is fixed, you need to make the gradient to also be fixed to create the magic effect of text scrolling:

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

这篇关于在bg重叠时将文本颜色从黑色更改为白色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！