0

我有一个容器，我想对其应用 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>

提前致谢。

4

2 回答 2

0

这取决于您想要实现的目标，因为这还不是很清楚。我建议你从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>

于 2019-11-14T16:54:40.783 回答
0

幸运的是，您似乎使用的是黑白颜色，因此您可以期待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>

于 2019-11-15T16:17:35.617 回答