Javascript 将心情与黑色文本混合

你好，我在这里尝试实现以下效果

使用混合模式在滚动时混合黑色文本 我检查了代码并试图复制它，但它不能正常工作 这是我的密码

.nav{
宽度：95vw；
显示器：flex；
证明内容：之间的空间；
字体大小：3vw；
混合模式：差异化；
位置：固定；
排名：0；
}
.导航项目{
颜色：#fff；
文字装饰：无；
文本转换：大写；
}

---

您需要为整个页面创建一个容器，然后在CSS中将其背景色设置为白色。这里有一个例子

.nav{
宽度：95vw；
显示器：flex；
证明内容：之间的空间；
字体大小：3vw；
混合模式：差异化；
位置：固定；
排名：0；
}
.导航项目{
颜色：#fff；
文字装饰：无；
文本转换：大写；
}
.集装箱{
背景色：白色；
身高：100%；
宽度：100%；
}

运行代码段

您需要为整个页面创建一个容器，然后在CSS中将其背景色设置为白色。这里有一个例子

.nav{
宽度：95vw；
显示器：flex；
证明内容：之间的空间；
字体大小：3vw；
混合模式：差异化；
位置：固定；
排名：0；
}
.导航项目{
颜色：#fff；
文字装饰：无；
文本转换：大写；
}
.集装箱{
背景色：白色；
身高：100%；
宽度：100%；
}

运行代码段

我们需要在导航栏下添加一些白色的东西（白色文本或白色形状）来查看它。我在导航下添加了一些白色文本。它正在工作

参见下面的示例。

.nav{
宽度：95vw；
显示器：flex；
证明内容：之间的空间；
字体大小：6vw；
混合模式：差异化；
位置：固定；
排名：0；
z指数：1；
}
.导航项目{
颜色：#fff；
文字装饰：无；
文本转换：大写；
}
.英雄{
高度：200vh；
}
.英雄，1号包厢{
位置：绝对位置；
背景：黑色；
宽度：100%；
高度：70像素；
左：0；
顶部：100px；
颜色：白色；
字体大小：50px；
}

测试

我们需要在导航栏下添加一些白色的东西（白色文本或白色形状）来查看它。我在导航下添加了一些白色文本。它正在工作

参见下面的示例。

.nav{
宽度：95vw；
显示器：flex；
证明内容：之间的空间；
字体大小：6vw；
混合模式：差异化；
位置：固定；
排名：0；
z指数：1；
}
.导航项目{
颜色：#fff；
文字装饰：无；
文本转换：大写；
}
.英雄{
高度：200vh；
}
.英雄，1号包厢{
位置：绝对位置；
背景：黑色；
宽度：100%；
高度：70像素；
左：0；
顶部：100px；
颜色：白色；
字体大小：50px；
}

测试

考虑您的浏览器使用基于RGB（红、绿、蓝）的颜色，每种颜色的数字介于0和255之间。256^3 = ‭16,777,216‬ 颜色。CSS

混合模式：差异

提供

背景色

减去

颜色

的绝对值（与零的距离）。如果背景为白色，则表示为

rgb（255255）

。如果文本为黑色，则颜色为

rgb（0,0,0）

，因此，如果减去每列（颜色），得到绝对值，则得到

rgb（255255）

，因此文本仍为白色。如果文本为白色

rgb（255255255）

，然后减去

rgb（0,0,0）

得到绝对值，则白色为黑色。如果您的背景为黑色

rgb（0,0,0）

，而文本为白色

rgb（255255255）

，则您将获得白色文本。这对你意味着什么？当使用

mix-blend mode:difference时，如果您想获得真正的颜色差异，则必须使用白色文本。不过，您的问题似乎是没有在
正文
上设置
背景色。它们在alpha通道上没有绝对差异，默认的
背景色是
透明的
考虑您的浏览器使用基于RGB（红色、绿色、蓝色）的颜色，每个颜色的数字介于0和255之间。256^3 = ‭16,777,216‬ 颜色。CSS
混合模式：差异
提供
背景色
减去
颜色
的绝对值（与零的距离）。如果背景为白色，则表示为
rgb（255255）
。如果文本为黑色，则颜色为
rgb（0,0,0）
，因此，如果减去每列（颜色），得到绝对值，则得到
rgb（255255）
，因此文本仍为白色。如果文本为白色
rgb（255255255）
，然后减去
rgb（0,0,0）
得到绝对值，则白色为黑色。如果您的背景为黑色
rgb（0,0,0）
，而文本为白色
rgb（255255255）
，则您将获得白色文本。这对你意味着什么？当使用
mix-blend mode:difference时，如果您想获得真正的颜色差异，则必须使用白色文本。不过，您的问题似乎是没有在
正文
上设置
背景色。它们在alpha通道上没有绝对差异，默认的
背景色是
透明的
如果文本在白色背景上，则文本将是黑色的。这就是区别。您不能在白色上使用黑色文本的原因是255-0=255（仍然是白色）。您能指导我如何做到这一点吗？哦，我刚才解释了使用
mix-blend mode:difference，必须使用白色文本才能变为黑色。RGB（红、绿、蓝）为（0到255，0到2