基于背景的自适应文本颜色

Question

如何基于背景动态创建（即使在浏览器中的“检查元素”选项上编辑元素背景后仍能工作）文本颜色？我希望它适用于body部分中的所有div。

应该如何工作？示例：

容器div的背景为白色（在CSS中指定），文本为默认黑色（在CSS中未指定）。我运行开发工具-> inspect元素，并使用它们将容器背景颜色从白色更改为黑色。

结果？文本也已根据背景颜色从默认的黑色动态更改为白色。您甚至不必刷新页面。这就是所有这些的工作方式。问题：如何用Javascript创建它，这是可能的？ 在评论部分进行详细说明

Answer 1

您可以使用CSS的 invert 功能，而无需使用JavaScript。只需为背景和文本使用相同的颜色，然后将以下代码添加到文本的CSS即可：

  

过滤器：反转（100％）;