How to decide the color of the text when using mix-blend-mode in CSS?

Question

how can I change the color of the text when using mix-blend-mode in CSS ?

Here is the code: https://jsfiddle.net/1nyah2zf/

What I have:

What I want:

Thanks !

code

Answer 1

I do not think mix-blend-mode would be what you need here :

From your example you could do it otherwise with background attachement :

example of the idea:

body {
  margin: 0;
  display: flex;
}

.left {
  width: 200px;
  height: 200px;
  background: green;
}

.right {
  width: 200px;
  height: 200px;
  background: url('https://www.illicoveto.com/wp-content/uploads/sacre-de-birmanie.jpg');
  background-size: 200px;
}

.text {
  position: absolute;
  left: 100px;
  top: 70px;
  font-size: 50px;
  animation-name: animation;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  background: linear-gradient(90deg, black 200px, white 200px) fixed;
  color: transparent;
  background-clip: text;
}

@keyframes animation {
  0% {
    left: 100px;
  }
  50% {
    left: 140px;
  }
  100% {
    left: 100px;
  }
}

<div class="left"></div>
<div class="right"></div>
<div class="text">HELLO!</div>

without background-attachement, then move the text only