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

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>