Change element color based on background, that its on-CodePudding

I would like to change an elements color based on the background, that it is standing on (not the background-color of the element itself).

In this example the logo is changing color based on the background: https://www.richardekwonye.com/

I can't seem to find anything on how that is done.

Thanks!

CodePudding user response：

As the commenters said, it's done through mix-blend-mode CSS property. Official documentation.

Here's a proof-of-concept:

div.circle {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: green;
}

h1.header {
  display: inline-block;
  color: darkgray;
}

h1.logo {
  position: absolute;
  top: 0;
  color: lightgray;
  mix-blend-mode: difference;
}

<div >
  <div ></div>
  <h1 >Welcome to StackOverflow!</h1>
  <h1 >Hello</h1>
</div>