Reverse HTML font colour from background - html

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.

Answer 1

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">