Html 混合模式差异未按预期工作

我有一个黑色的文本重叠一个黑色的div-我想使文本的部分，这是重叠，白色。因此，我尝试使用

混合模式

，但它不起作用。怎么会这样

快速演示：

h1{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：黑色；
字体大小：9rem；
混合模式：差异化；
z指数：1；
}
.中心块{
位置：绝对位置；
最高：50%；
左：50%；
转换：translateY（计算（-50%-10vh））translateX（-50%）；
宽度：22.5雷姆；
高度：30雷姆；
背景色：黑色；
}

这是一个
测试

不能使用黑色文本进行混合混合模式

如果背景为白色，则表示为rgb（255255）。如果文本为黑色，则颜色为rgb（0,0,0），因此，如果减去每列（颜色），得到绝对值，则得到rgb（255255），因此文本仍然是白色对白色。如果文本为白色rgb（255255255），减去rgb（0,0,0）得到绝对值，则白色为黑色。如果您的背景为黑色rgb（0,0,0），文本为白色rgb（255255255），则会得到白色文本。如果您的文本是黑色rgb（0,0,0），背景也是黑色rgb（0,0,0），则差异是rgb（0,0,0），因此黑色覆盖黑色（这是您的示例）

简单的答案是，让你的

颜色：白色在h1中。此外，您还需要设置身体背景色，使文本在没有覆盖任何内容的情况下有一些不同之处（例如，在示例中，当文本覆盖白色时，您仍然有黑色文本，这不是因为混合混合混合模式，而是因为它没有任何可混合的内容。）因此，按照以下方式实现：


h1{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
字体大小：9rem；
混合模式：差异化；
z指数：1；
}
.中心块{
位置：绝对位置；
最高：50%；
左：50%；
转换：translateY（计算（-50%-10vh））translateX（-50%）；
宽度：22.5雷姆；
高度：30雷姆；
背景色：黑色；
}
身体{
背景色：白色；
}
这是一个
测试
不能使用黑色文本进行混合混合模式

如果背景为白色，则表示为rgb（255255）。如果文本为黑色，则颜色为rgb（0,0,0），因此，如果减去每列（颜色），得到绝对值，则得到rgb（255255），因此文本仍然是白色对白色。如果文本为白色rgb（255255255），减去rgb（0,0,0）得到绝对值，则白色为黑色。如果您的背景为黑色rgb（0,0,0），文本为白色rgb（255255255），则会得到白色文本。如果您的文本是黑色rgb（0,0,0），背景也是黑色rgb（0,0,0），则差异是rgb（0,0,0），因此黑色覆盖黑色（这是您的示例）

简单的答案是，让你的
颜色：白色在h1中。此外，您还需要设置身体背景色，使文本在没有覆盖任何内容的情况下有一些不同之处（例如，在示例中，当文本覆盖白色时，您仍然有黑色文本，这不是因为混合混合混合模式，而是因为它没有任何可混合的内容。）因此，按照以下方式实现：


h1{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
字体大小：9rem；
混合模式：差异化；
z指数：1；
}
.中心块{
位置：绝对位置；
最高：50%；
左：50%；
转换：translateY（计算（-50%-10vh））translateX（-50%）；
宽度：22.5雷姆；
高度：30雷姆；
背景色：黑色；
}
身体{
背景色：白色；
}
这是一个
测试