Html 如何在css中将一个容器与两个不同的容器混合

我有一个容器，我想应用混合混合模式：对其应用差异，以与其父容器和父容器的父容器混合（依此类推）。应用混合模式时，容器仅与其父容器混合。我如何才能达到我前面描述的结果

代码结构如下所示：

.sec1{
位置：绝对位置；
左：0；
排名：0；
宽度：100vw；
高度：100vh；
背景色：黑色；
}
.sec2{
位置：绝对位置；
左：0；
顶部：100vh；
宽度：100vw；
高度：100vh；
背景色：白色；
}
.svg1{
位置：固定；
...
}

---

这取决于您想要实现的目标，因为这还不太清楚。 我建议你读一读像这样的教程

否则，使用混合模式时，结果可能取决于颜色和其他因素，但您也可以堆叠到某个点，例如，您可以创建一个类并应用该混合模式。 检查下面的基本示例

正文{
背景：灰色；
}
.混合{
混合模式：排除；
字体：标题；
填充：2rem；
框大小：边框框；
}
主要{
宽度：100%；
背景色：浅绿色；
}
旁白{
背景颜色：米色；
}
a{
背景颜色：绿色；
颜色：黑色；
}

这是主容器

幸运的是，您使用的似乎是黑白色，因此您可以使用

混合模式来完成这项工作

用白色填充的字体和黑色背景也应该混合在白色背景上

范例


.sec1{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
高度：100vh；
背景色：黑色；
}
.sec2{
位置：绝对位置；
左：0；
顶部：100vh；
宽度：100%；
高度：100vh；
背景色：白色；
}
.svg1{
位置：固定；
最高：50%；
右：0；
混合模式：差异化；
转化：translatey（-50%）；
}
身体{
保证金：0；
}

一些文本
谢谢您的回答。确切地说，我的问题是：这就是它现在的样子。svg只与div2混合，而不与div1混合。这是层次结构：。如何实现svg与两个容器的混合，使svg在黑色容器上为白色，在白色容器上为黑色。混合模式是在svg内部的标签属性中设置的。没有代码，没有巧克力，可能是这样的吗@G-Cyr我认为代码并没有更清楚地说明这一点，当你阅读我在应科院的答案下写的评论时。链接到的代码仅将标签与主体->仅一个元素混合。这也适用于我，但正如我所写的，我想将其与多个对象混合…多个对象，好吧，但是布局/结构/css/背景色是什么？它可以是任何混合模式有效或根本无效的地方。我们无法猜测你到底有什么。如果你认为你的评论很重要，请将其添加到问题中。对你来说显而易见的东西对你来说是肯定的；）@好的，我已经编辑了这篇文章