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

Question

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

就像在这张图片中一样

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

由于

Answer 1

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

使用带有overflow: hidden;的DIV作为显示评级等级的海军“栏”。 然后你写出两套TEXT：

1. 在DIV栏内（溢出：隐藏;），它将是白色（在顶部）
2. 在底层DIV容器中，它将是黑色的。 （容器）

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

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

这是我的jsFiddle

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

Answer 2

虽然对于这个确切的情况，可接受的解决方案可能是最容易的，但我已经编写了一个更全面的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元素，因此您必须以这种方式定位文本（这不应该是一个问题在我看来你的情况下。）

Answer 3

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

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

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

另请阅读：Jquery: How to check if the element has certain css class/style

Answer 4

是的，这是可能的。

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

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

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

Answer 5

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

1. 以像素为单位计算重叠的宽度。即width = ${"#container"}.width() - ${"#progressbar"}.width();

2. 计算您要突出显示的文字数量，您可以使用follow this discussion。我会从一个空字符串开始，检查它的宽度，如果它低于上面计算的宽度，则添加一个字符并重复。一旦它更高，选择该字符串

3. 在跨度之间插入上面的字符串，如此${"#container"}.html("<span class='highlight'>"+highlitedText+"</span>"+restOfTheText);显然，highlitedText是一个包含2中字符的字符串，而restOfTheText是一个包含其余字符的字符串。

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

希望有所帮助！