Comment faire en sorte que le mode de fusion ignore certains arrière-plans ?

Question

Veuillez voir l'image ci-dessous :

Imaginez le rectangle bleu en bas, avec le mode de fusion Mix : Différence, monte lentement vers le haut. Je veux qu'il ignore la bande rouge et reste bleu lorsqu'il la traverse, mais utilise le mode de fusion Mix lorsqu'il se trouve sur la bande verte. Comment puis-je faire cela?

Answer 1

Vous pouvez mettre le mode de fusion Mélange sur les rectangles où vous souhaitez changer le rectangle bleu et le laisser sur les rectangles où vous ne souhaitez pas changer le rectangle bleu.

Voici un exemple simple :

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