Html 混合颜色混合在safari中无法正常工作

我在safari中使用混合色时遇到问题。我在这里检查了其他答案，但它们似乎不起作用。我正在使用clippath创建一个曲线层，其z索引比我的文本低，然后我希望文本位于上方，并且能够根据背景改变颜色。它已经在chrome中工作了，但是在safari e中将容器的位置更改为静态并没有帮助，因为我需要背景层或文本是绝对位置。我将附上期望结果和实际结果的截图

代码：

。主页{
高度：800px；
}
.主页颜色{
背景色：rgb（8141165）；
身高：继承；
剪辑路径：椭圆（0时为80%60%）；
}
h1{
字体系列：“Playfair显示”，衬线；
}
.HomeText{
位置：绝对位置；
宽度：100%；
高度：自动；
左：0；
顶部：90px；
文本对齐：居中；
}
.一线{
右边填充：500px；
字体大小：5rem；
颜色：rgb（0255255）；
}
.二线{
字体大小：5rem；
颜色：rgb（8141165）；
混合模式：颜色减淡；
}
第三行{
左侧填充：550px；
字体大小：5rem；
颜色：rgb（8141165）；
}

我们相信
在里面
经历

注意：我使用的是react，您可能可以从我的jsp中的元素看出，这是否回答了您的问题？注意：我使用的是react，您可能可以从我的jsp中的元素看出，这是否回答了您的问题？