How to make blend mode ignore certain background?

Question

Please see the picture below:

Imagine that the blue rectangle at the bottom, with blend mode: Difference, is slowly moving up to the top. I want it to ignore the red stripe and stay blue when it goes through it, but use the Blend blending mode when it's on the green stripe. How do I do this?

Answer 1

You can put the Blend blend mode on the rectangles where you want to change the blue rectangle and leave it on the rectangles where you don't want to change the blue rectangle.

This is a simple example:

<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>