Question 186498 in CSS Question posted in
Some basic documentation can be found here.

Css – How do I make Mix Blend Mode ignore certain backgrounds?

Please take a look at the image below:

enter image description here

Imagine the blue rectangle at the bottom, with mix-blend-mode: difference, is slowly moving up towards the top. I would like it to ignore the red stripe and stay blue when crossing it, but use the mix-blend-mode for when it is on the green stripe. How would I go about doing this?

Tags:

2

Answers


  1. 0

    To make the mix-blend-mode property ignore certain backgrounds and apply only to specific elements, you can use the CSS isolation property which allows you to control the stacking context of an element and determine how it interacts with its parent and sibling elements.

    Add isolation: isolate; to the blue rectangle css.

    Login or Signup to reply.
  2. 0

    You can put the mix-blend-mode on the rectangle where you want the blue rectangle to change and leave it off the one that is not to change the blue rectangle.

    Here’s 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search