基于背景的反向文本颜色
我正在尝试根据背景颜色更改文字颜色。 假设我有黑色条纹背景，整体背景为白色，我需要白色背景上的文字黑色和黑色背景上的白色文字。
有没有办法做到这一点，只有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>
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;
}
这是一个更好理解的Codepen。 谢谢。
您可以使用mix-blend-mode属性来实现此效果。 我必须警告你，IE中不存在支持。 要做你想做的事，你需要让所有的元素重叠，就像你已经有的那样，然后设置<span>或者你正在使用文本的任何元素来mix-blend-mode: difference; 。
如果您想要使用实际颜色，而不是黑白，则需要具有该颜色的另一个元素。 它需要覆盖您想要应用颜色的整个区域，并将其mix-blend-mode设置为screen 。
尽管如此，元素不应该在彼此之内。 文本需要在背景元素之上，但不能在内部。 我建议一个包装<div>来解决这个问题。
你可以把这个：
为背景： background-color: black; 或background-color: white;
为文字： color: black; 或color:white; 。