Wie lässt sich der Mischmodus dazu bringen, bestimmte Hintergründe zu ignorieren?

Question

Bitte sehen Sie sich das Bild unten an:

Stellen Sie sich vor, dass sich das blaue Rechteck unten mit dem Mischmodus „Differenz“ langsam nach oben bewegt. Ich möchte, dass es den roten Streifen ignoriert und blau bleibt, wenn es hindurchgeht, aber den Mischmodus „Mischen“ verwende, wenn es auf dem grünen Streifen ist. Wie mache ich das?

Answer 1

您可以将混合混合模式放在您想要更改蓝色矩形的矩形上，并将其保留在不更改蓝色矩形的矩形上。

这是一个简单的例子：

<style>
  .green {
    width: 200px;
    height: 100px;
    background: lime;
    mix-blend-mode: difference;
  }
  
  .red {
    width: 200px;
    height: 100px;
    background: red;
  }
  
  .blue {
    width: 100px;
    height: 100px;
    background: blue;
    animation: move 5s infinite linear;
    osition: absolute;
  }
  
  @keyframes move {
    0% {
      margin-top: 0px;
    }
    100% {
      margin-top: -300px;
    }
  }
</style>
<div class="green"></div>
<div class="red"></div>
<div class="blue"></div>