Reverse HTML font colour from background

Question

I'm building a website for my friend, and i've hit a snag.

The background is a moving image, and i would like the font colour of the main title to be a reverse of it on every frame. I'm sure this would be impossible to do without CSS, but i don't know how to make it work. I also was wondering if there was a way to make it affect not just the whole thing, but like each letter or pixel? I'm not sure.

Here's my code:

var isIncrementing = false;
var intervalId;
var numberElement = document.getElementById("number");
var toggleButton = document.getElementById("toggleButton");

function toggleIncrement() {
  if (!isIncrementing) {
    isIncrementing = true;
    intervalId = setInterval(incrementNumber, 0); // Increment every second
    toggleButton.innerHTML = "Click to deactivate Duckie-fier";
  } else {
    isIncrementing = false;
    clearInterval(intervalId);
    toggleButton.innerHTML = "Click to activate Duckie-fier";
  }
}

function incrementNumber() {
  var number = parseInt(numberElement.innerHTML);
  numberElement.innerHTML = number + 1;
}

img {
  width: 30%;
  height: 70%;
}

body {
  background-image: url('https://media3.giphy.com/media/pR1ztNFfPS7wa2eYfY/200w.gif?cid=6c09b9523w4yesgqef8dno4mrrz98shnzgkv7dhgl4dqd9qp&rid=200w.gif&ct=g');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family:courier;

}

<h1>Number of Duckies: <span id="number">0</span></h1>
<button style="font-family: Courier;" id="toggleButton" onclick="toggleIncrement()">Click to activate Duckie-fier</button>

<br>
</br>

<img src="https://i.kym-cdn.com/photos/images/original/002/429/796/96c.gif">

I want it to be updated every frame of the background, if possible.

https://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color — epascarello, Feb 15 '23 at 20:33

score 2 · Answer 1 · answered Feb 15 '23 at 20:25

The answer could be using the mix-blend-mode: difference; property, however it appears to not have universal browser support so it might not be the best solution.

var isIncrementing = false;
var intervalId;
var numberElement = document.getElementById("number");
var toggleButton = document.getElementById("toggleButton");

function toggleIncrement() {
  if (!isIncrementing) {
    isIncrementing = true;
    intervalId = setInterval(incrementNumber, 0); // Increment every second
    toggleButton.innerHTML = "Click to deactivate Duckie-fier";
  } else {
    isIncrementing = false;
    clearInterval(intervalId);
    toggleButton.innerHTML = "Click to activate Duckie-fier";
  }
}

function incrementNumber() {
  var number = parseInt(numberElement.innerHTML);
  numberElement.innerHTML = number + 1;
}

img {
  width: 30%;
  height: 70%;
}

body {
  background-image: url('https://media3.giphy.com/media/pR1ztNFfPS7wa2eYfY/200w.gif?cid=6c09b9523w4yesgqef8dno4mrrz98shnzgkv7dhgl4dqd9qp&rid=200w.gif&ct=g');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font-family: courier;
}

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

<h1>Number of Duckies: <span id="number">0</span></h1>
<button style="font-family: Courier;" id="toggleButton" onclick="toggleIncrement()">Click to activate Duckie-fier</button>

<br>
</br>

<img src="https://i.kym-cdn.com/photos/images/original/002/429/796/96c.gif">

That's so weird. Your code works when it's running when you click Run code snippet but not when you click Full page. — Bernard Borg, Feb 15 '23 at 20:30
I know it weirded me out too. As I said the support varies from browser to browser so there might be some differences in how these snippets are run. Either way I'd refrain from using this altogether and try and build something within the limitations of the web. These kind of colors have bad readability — Blye, Feb 15 '23 at 20:33
Yes, you can check all the support data at https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#browser_compatibility — Blye, Feb 15 '23 at 21:40

Reverse HTML font colour from background

1 Answers1