反转图像上的标题颜色答案

【问题标题】：Invert colors of title over an image反转图像上的标题颜色
【发布时间】：2020-02-07 01:26:18
【问题描述】：

这是我当前的 HTML：

.titleText {
  font-family: Hacked;
  font-size: 8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
}

.titleContainer {
  position: relative;
}

body {
  margin: 0;
}

<!DOCTYPE html>
<div class="titleContainer">
  <img src="assets/ethan.png">
  <h1 class="titleText">Ethan Brand</h1>
</div>

我希望图像上的文本是“透明的对立面”，反转文本每个像素后面的颜色。我发现了这个：How can I invert color using CSS? 但这会改变所有文本，而不是取每个像素的倒数。

谢谢！

【问题讨论】：

标签： html css image text

【解决方案1】：

在文字上使用mix-blend-mode: difference; 和color: white：

.titleText {
  font-family: Hacked;
  font-size: 8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  mix-blend-mode: difference;
  color: white;
  margin: 0;
}

.titleContainer {
  position: relative;
}

body {
  margin: 0;
}

<div class="titleContainer">
  <img src="https://picsum.photos/800/400">
  <h1 class="titleText">Ethan Brand</h1>
</div>

【讨论】：

为了获得更完整的答案，这里提供了指向 MDN developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode 上 mix-blend-mode 文档的链接