是否可以使用css根据背景颜色更改文本颜色？

就像在这张图片中一样

当文本从一个div（白色空间：nowrap）越过时，是否可以使用css或jquery / javascript更改文本颜色？

谢谢

这是我的解决方案（通过不同的方式思考）：

使用带overflow: hidden;的DIV overflow: hidden; 对于显示评级等级的海军“酒吧”。然后你写出两套TEXT：

结果将是两个彩色文本div的重叠：

  ________________________________ | 1 | 2 | |_(dark blue w white)_|__________|

这是我的jsFiddle

它的效果很好，因为如果条形图处于该宽度，它将“切入”字母。检查出来，我认为它正是你要找的。

虽然对于这个确切的情况，可接受的解决方案可能是最简单的，但我已经编写了一个更全面的jQuery插件，可以完全满足您的需求（以及更多）。

回复： https ： //github.com/salsita/jq-clipthru
博客： https ： //blog.javascripting.com/2014/06/11/changing-text-color-based-on-background-color/

简而言之，它动态创建具有不同CSS类的元素的克隆，并使用原始CSS剪辑剪切其可见内容以匹配重叠。如果您使用它，请注意CSS剪辑仅适用于position: absolute或position: fixed元素，因此您必须以这种方式定位文本（在我看来，这不应该是您的问题）。

是的，这是可能的。

您可以将背景和前景颜色组合到一个类中，并在文本中使用它。所以你有一个样式类有黑色文本白色背景和一个有白色文本和黑色背景。您可以切换该类，然后文本将随背景颜色变化。

你可以使用jQuery('body').css('color', '#fff')例如将正文文本的颜色更改为白色。

如果您提供一些示例代码，甚至可以为您的问题创建更具体的答案。

不，你不能用CSS做到这一点。你需要JavaScript。

使用jQuery / JavaScript，您可以检查元素是否应用了CSS规则，然后执行您想要的操作，即

 if ( $('#element').css('white-space') == 'nowrap' ) { // do something } else { // do something else }

另请阅读： Jquery：如何检查元素是否具有某些css类/样式

的确，你需要使用javascript。我会通过这样做来解决问题：

计算重叠的宽度（以像素为单位）。 ie width = ${"#container"}.width() - ${"#progressbar"}.width();
计算您要突出显示的文本量，您可以按照此讨论使用。我会从一个空字符串开始，检查它的宽度，如果它低于上面计算的宽度，则添加一个字符并重复。一旦它更高，选择该字符串
在跨度之间插入上面的字符串，例如${"#container"}.html(""+highlitedText+""+restOfTheText); 显然highlitedText是一个包含2中字符的字符串，restOfTheText是一个包含其余字符的字符串。

这种方法的好处是，如果你改变进度条div的宽度，你可以重新运行它。

希望有所帮助！