Css 将背景重叠处的文本颜色从黑色更改为白色

我有一个div，它的位置是绝对的，带有背景色渐变。我有这个文字，我想改变为白色，因为我滚动文字了

我目前正在使用“混合模式”属性来实现这一点，但我找不到任何将文本从黑色变为白色的设置。以前有没有人这样做过，或者我能想出一个窍门

.bg容器{
位置：固定；
顶部：-30px；
左：0；
宽度：100px；
高度：100px；
}
.梯度背景{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：200px；
背景图像：线性梯度（到底部，rgb（100182240）15%，rgb（81155244））；
变换：歪斜（-15度）；
}
.滚动内容{
位置：绝对位置；
顶部：50px；
}
.滚动内容页{
颜色：#000；
混合模式：叠加；
}
/*iOS黑客*/
.滚动内容p:之后{
内容：'\200c'
}

abc 1

abc 2

abc 3

abc 4

abc 5

abc 6

abc 7

abc 8

abc 9

abc 10

abc 11

abc 12

abc 13

abc 14

abc 15

abc 16

abc 17

abc 18

abc 19

您可以使用JavaScript进行测量，并将样式应用于您想要的范围内的标记，但您也可以做一些非常简单的事情，使文本可读（这属于“我可以做的其他一些技巧”）：

。滚动内容{
文本阴影：0 0 3px白色；
}

这只会在蓝色背景上显示，在白色背景上消失。不过，这取决于您想要达到的效果

---

即使使用JavaScript实现，您也可以将其考虑为<强>渐进增强<强>（对于JS较少的用户）。

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
变量bghight=$（'.bg container'）.height（）；
var scroll=$（窗口）.scrollTop（）；
$（'.scroll content p'）。每个（（i，el）=>{
var pPos=$（el）.offset（）.top；
var pHeight=$（el）.height（）；
如果（pPos<（滚动-灯光+背景高度））{
$（el）.removeClass（'黑色'）；
$（el）.addClass（'white'）；
}否则{
$（el）.addClass（'黑色'）；
$（el.removeClass（'white'）；
}
});
})
})

.bg容器{
位置：固定；
排名：0；
左：0；
宽度：100px；
高度：100px；
}
.梯度背景{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
背景图像：线性梯度（到底部，rgb（1,55,124）15%，rgb（81,155,244））；
}
.滚动内容{
位置：相对位置；
z指数：99999；
字体系列：neuzeit grotesk，无衬线；
字号：700；
}
怀特先生{
颜色：#fff；
}
布莱克先生{
颜色：黑色；
}

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

asdf

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

。渐变背景{
位置：固定；
排名：0；
左：0；
宽度：100px；
高度：200px；
背景图像：线性梯度（到底部，rgb（100182240）15%，rgb（81155244））；
变换：歪斜（-15度）；
变换原点：左；
}
.滚动内容{
位置：绝对位置；
顶部：50px；
/*165度=180度-15度*/
背景：线性梯度（165度，FFF195px，#000 195px）固定；
背景剪辑：文本；
-webkit背景剪辑：文本；
颜色：透明；
-webkit文本填充颜色：透明；
}

abc 1

abc 2

abc 3

abc 4

abc 5

abc 6

abc 7

abc 8

abc 9

abc 10

abc 11

abc 12

abc 13

abc 14

abc 15

abc 16

abc 17

abc 18

abc 19

但文本不会变为白色，这是OP要求的。它只会在渐变下可见。对，这就是为什么我注意到，如果他主要担心可读性等问题，它只是在一个相关技巧的大范畴下。添加了一个JS实现，但在移动设备上盲目飞行。将尽快进行测试。没有时间测试JS，而且它只不过是伪代码，所以删除该部分——但如果有人想尝试它或将其用作启动程序，它将在编辑历史记录中。欣赏这个想法，但不是我想要达到的效果。我不介意JS解决方案，但我认为它不会存在。我认为解决方案将是一系列的过滤器和混合背景模式。也许我必须复制文本内容并覆盖它。也许我必须对一些div应用隔离：隔离属性。仍然没有弄明白：（对不起，我重新做了我的示例以匹配我的图片。边界不是水平的，而是实际的对角线，因此文本在边界处变为两个色调。如果是水平的，这肯定会起作用。您能解释一下此代码的作用吗？

（pPos<（滚动-pHeight+bgHeight））

@BearNithi

位置小于（px中的当前滚动-

高度+渐变高度），您应该能够将纯色转换为渐变色（例如，如下所示：）…如果你面临问题，告诉meHey Temani，是的，如果这是我想要达到的效果，我可以这样做，但事实并非如此。我想要