如何使混合混合模式忽略某些背景？

Question

请看下面的图片：

想象一下底部的蓝色矩形，具有混合混合模式：差异，正在慢慢向上移动到顶部。我希望它忽略红色条纹并在穿过它时保持蓝色，但当它位于绿色条纹上时使用混合混合模式。我该如何去做呢？

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>