javascript - 混合混合模式：差异不起作用

Question

我试图让 h1 的字体做出反应，使其字体颜色始终与背景相反。我已经检查了所有内容，但不知道出了什么问题。有什么帮助吗？

var oldName;
var open;

function changeImage(name) {
  var text = document.getElementById('demo');
  if (name == oldName && open) {
    text.innerHTML = "<img src=\"blank.jpg\"alt=\"blank\"height=\"256\">"
    open = false;
  } else {
    text.innerHTML = "<img height=\"256\" src=" + name + ">"
    open = true;
  }

  oldName = name;
}

.rev {
  mix-blend-mode: difference;
}

body {
  background-image: url("colorful.jpg");
}

span {
  font-size: 20px;
}

.inside {
  font-size: 30px;
}

button {
  margin: 0 auto;
  width: 400px;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
}

p {
  font-size: 20;
}

#linkki {
  width: 76px;
  font-size: 14px;
  background-color: white;
}

<center>
  <br />
  <div class="rev">
    <h1>Kysymys</h1>
    <div>
      <br><br>
      <div id="demo">
        <img src="blank.png">
      </div>
      <br><br><br>
      <button onclick="changeImage('wrong.png'); this.onclick=null;">
		A) Tuntitehtävät, joita hyädynnän omassa kyselyssä ja extratehtävät, jos ehdin.
		</button>
      <br />
      <br />
      <button onclick="changeImage('wrong2.png'); this.onclick=null;">
		B) Tuntitehtävät.
		</button>
      <br />
      <br />
      <button onclick="changeImage('correct.png'); this.onclick=null;">
		C) Tuntitehtävät ja oma kysely.
		</button>
      <br>
      <br>
      <br>
      <div id="myDIV">
        <button id="linkki"><a id="linkki" href="kys2.html">Seuraava</a></button>
      </div>
</center>

h1 显示为黑色。我希望它与背景相反。