Bagaimana untuk membuat mod campuran mengabaikan latar belakang tertentu?

Question

Sila lihat gambar di bawah:

Bayangkan segi empat tepat biru di bahagian bawah, dengan mod campuran Campur: Perbezaan, perlahan-lahan bergerak ke atas. Saya mahu ia mengabaikan jalur merah dan kekal biru apabila ia melaluinya, tetapi gunakan mod adunan Campur apabila ia berada pada jalur hijau. Bagaimana saya melakukan ini?

Answer 1

Anda boleh meletakkan mod Blend blend pada segi empat tepat di mana anda ingin menukar segi empat tepat biru dan biarkan pada segi empat tepat di mana anda tidak mahu menukar segi empat tepat biru.

Berikut ialah contoh mudah:

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