问题

我正在为我的朋友建立一个网站，但遇到了一个问题。

背景是一个移动的图像，我希望主要的

标题的字体颜色在每一帧中都与背景颜色相反。我确信这几乎不可能没有CSS，但我不知道如何使其工作。我也想知道是否有办法使其影响不仅整个标题，还包括每个字母或像素？我不太确定。

这是我的代码：

<!-- 开始代码片段：js 隐藏: false 控制台: true Babel: false -->

<!-- 语言: lang-js -->
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); // 每秒递增
    toggleButton.innerHTML = "单击以停用 Duckie-fier";
  } else {
    isIncrementing = false;
    clearInterval(intervalId);
    toggleButton.innerHTML = "单击以启用 Duckie-fier";
  }
}

function incrementNumber() {
  var number = parseInt(numberElement.innerHTML);
  numberElement.innerHTML = number + 1;
}
<!-- 语言: lang-css -->
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;
}
<!-- 语言: lang-html -->
<h1>鸭子数量: <span id="number">0</span></h1>
<button style="font-family: Courier;" id="toggleButton" onclick="toggleIncrement()">单击以启用 Duckie-fier</button>

<br></br>

<img src="https://i.kym-cdn.com/photos/images/original/002/429/796/96c.gif">
<!-- 结束代码片段 -->

如果可能的话，我希望它能在背景的每一帧中更新。

英文:

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 <h1> 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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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;
}

<!-- language: lang-css -->

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;

}

<!-- language: lang-html -->

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

<!-- end snippet -->

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

答案1

得分: 2

代码部分不需要翻译，以下是你要翻译的内容：

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

答案可能是使用 mix-blend-mode: difference; 属性，但似乎不具备通用浏览器支持，因此可能不是最佳解决方案。

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