Home  >  Q&A  >  body text

How to make blend mode ignore certain background?

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?

P粉418351692P粉418351692421 days ago580

reply all(1)I'll reply

  • P粉023326773

    P粉0233267732023-09-16 00:31:28

    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>

    reply
    0
  • Cancelreply