html - 我如何在CSS中将一个容器与两个不同的容器混合

Question

我有一个容器，我想对其应用 mix-blend-mode: difference 以与其父容器和父容器的父容器混合(等等)。当我应用混合模式时，容器仅与其父容器混合。我怎样才能达到我之前描述的结果。

代码结构是这样的:

.sec1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
}
.sec2 {
  position: absolute;
  left: 0;
  top: 100vh;
  width: 100vw;
  height: 100vh;
  background-color: white;
}
.svg1 {
  position: fixed;
  ...
}

<section class="sec1">
  <section class="sec2">
    <svg class="svg1" ...>
      <text ... style="...;mix-blend-mode:difference;"></text>
    </svg>
  </section>
</section>

提前致谢。

Answer 1

这取决于您想要实现的目标，因为这不是很清楚。 我建议您阅读来自 Codrops 的此类教程

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

body {
  background: gray;
}

.blend {
  mix-blend-mode: exclusion;

  font: caption;
  padding: 2rem;
  box-sizing: border-box;
}

main {
  width: 100%;
  background-color: aqua;
}

aside {
  background-color: beige;
}

a {
  background-color: green;
  color: black;
}

<main class="blend"> 
<p>This is main container </p>

<aside class="blend"> 
This is the sidebar 
<a href="#" class="blend"> Link </a> 
</aside>

</main>