Set text color based on color of another element in the same spot-CodePudding

I want my fixed text change its color depending on the exact background color that's currently behind it, pixel-by-pixel. Is it possible?In the given example, part of the text on the blue background would be white Is it possible to do if the shape on which the text is displayed has different edges than horizontal/vertical?

I tried using JQuery to target specific elements on the page, knowing that the scroll function will only let me target scroll position, so only horizontal elements, and the text will change color in its entirety, not pixel-by-pixel, which would be my goal, as I'm planning to add custom-shaped backgrounds, and it would make the text readable also in transitional positions, as per the example. However, even this didn't work, possibly due to some CSS issues. Is here a way to do it in CSS?

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll <= $('.fp-container-1').offset().bottom) {
      $('nav-button').css('color', 'black');
    }
    if (scroll >= $('.fp-container-2').offset().top) {
      $('nav-button').css('color', 'white');
    }
  });

.fp-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

.fp-container-1 {
    background-color: rgb(255, 255, 255);
}

.fp-container-2 {
    display: block;
    background-color: rgb(70, 67, 226);
    height: 150vh;
}

CodePudding user response：

h1 {
  mix-blend-mode: difference;
  color:red;
}


/* LAYOUT */
section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 500px;
  width: 100%;
}

section div {
  position: absolute;
  width:100%;
  height: 50%;
  z-index: -1;
}

.top {
  top: 0;
  background: red;
}

.bottom {
  bottom: 0;
  background: blue;
}

h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 50px;
}

<section>
  <div ></div>
  <div ></div>
  <h1>Hello World</h1>
</section>

CodePudding user response：

You can achieve this by using the CSS3 filter property.

The syntax would be:

.nav-button {
    color: white;
    filter: brightness(50%) invert(1);
}

.fp-container-1 {
    background-color: rgb(255, 255, 255);
}

.fp-container-2 {
    display: block;
    background-color: rgb(70, 67, 226);
    height: 150vh;
    filter: brightness(50%) invert(1);
}