Html 基于背景的反向文本颜色

我正在尝试根据背景色更改文本颜色。假设我有黑色条纹的背景，整个背景是白色的，我需要白色背景上的黑色文本和黑色背景上的白色文本

有没有办法做到这一点，只使用CSS？如果没有，那么最好的做法是什么。请参见下面的HTML文件：

<div class="background">
  <p>Aliquam dolor nunc, auctor non dolor vitae, eleifend fringilla felis. Praesent dapibus erat ut nisl commodo ullamcorper.</p>
  <p>Morbi eget urna augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  <p>Nullam laoreet auctor urna at eleifend. Proin venenatis hendrerit mauris, mollis malesuada lorem consectetur et. Aliquam sed iaculis augue.</p>
  <p>Donec viverra ex in lectus luctus porttitor.</p>
</div>

这里有一个更好理解的例子。谢谢。

你可以把这个：

• 对于背景：

  背景颜色：黑色或
  背景色：白色
  

• 对于文本：

  颜色：黑色或
  颜色：白色
  

---

您可以使用

混合模式

属性实现此效果。我必须警告你，IE中不存在支持。要做你想做的事情，你需要让所有元素重叠，就像你已经做的一样，然后将

或你用于文本的任何元素设置为

混合模式：差异

如果您想使用实际颜色，而不仅仅是黑白，则需要另一个具有该颜色的元素。它需要覆盖要应用颜色的整个区域，并将其
混合模式设置为
屏幕

不过，这里有一个陷阱，元素不应该在彼此内部。文本需要位于背景元素之上，但不能位于背景元素内部。我建议使用包装器
来解决这个问题。
我认为纯CSS没有真正的解决方法。
.background {
  width: 480px;
  height: 480px;
  background-image: url(http://www.musicsquare-pro.com/construction/wp-content/themes/punch/images/masks/mask_square_dark.png);
  background-size: 480px 480px;
}