Question

我有一个容器，我想对其应用mix-blend-mode：差异，以使其与它的父母容器和父母容器的父母容器（等等）混合。当我应用混合模式时，容器仅与其父容器混合。如何获得我之前描述的结果。

代码结构如下：

.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

这样的教程

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

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>

Answer 2

幸运的是，您似乎正在使用黑白颜色，因此可以期望mix-blend-mode可以完成工作。

填充为白色的字体，并且黑色背景也应混合在您的白色背景上

示例

.sec1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: black;
}

.sec2 {
  position: absolute;
  left: 0;
  top: 100vh;
  width: 100%;
  height: 100vh;
  background-color: white;
}

.svg1 {
  position: fixed;
  top: 50%;
  right: 0; 
  mix-blend-mode: difference;
  transform:translatey(-50%);
}

body {
  margin: 0;
}

<section class="sec1">
  <section class="sec2">
    <svg class="svg1" xmlns="http://www.w3.org/2000/svg" height="115" width="25">
  <text x="2" y="-2" transform="rotate(90 0,0)" fill="white" style="font-size:25px">Some text</text>
</svg>
  </section>
</section>

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

2 个答案: