标题：在除白色之外的任何颜色的背景上实现白色文本可见性-PHP中文网问答

当背景颜色为黑色时，使用 mix-blend-mode: Difference 将文本颜色更改为白色效果很好。将鼠标移至文字处即可查看效果：

const blackBox = document.querySelector(".black-box");
window.addEventLis tener('mousemove', function(event) {
  blackBox.style.left = `${event.pageX - 50}px`;
  blackBox.style.top = `${event.pageY - 50}px`;
});

.wrapper {
  background-color: white;
}
h1 {
  position: relative;
  z-index: 2;
  color: white;
  mix-blend-mode: difference;
}

.black-box {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 1;
  background-color: black;
}


  Lorem Ipsum

如果背景不是黑色，这不会产生白色文本，这是可以理解的：

const box = document.querySelector(".box");
window.addEventList ener('mousemove', function(event) {
  box.style.left = `${event.pageX - 50}px`;
  box.style.top = `${event.pageY - 50}px`;
});

.wrapper {
  background-color: white;
}
h1 {
  position: relative;
  z-index: 2;
  color: white;
  mix-blend-mode: difference;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 1;
  background-image: url("https://placekitten.com/100/100")
}


  Lorem Ipsum

有什么方法可以让背景与白色不同时文本颜色从黑色变为白色吗？