使用CSS，根据背景颜色改变文本颜色是否可能？

Question

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

就像这张图片中所示：

当文本跨越一个

（设置为white-space:nowrap）时，是否可以使用CSS来改变文本颜色，如果不能用CSS，则可以使用JavaScript/jQuery吗？

- Anupam

---

我相信这是可能的，但你不应该这样做——如果标签的颜色在中途改变，会让人感到困惑。只需选择一种与两种背景颜色都有正确对比度的颜色即可！ - Alnitak

有一个很酷的解决方案由tomatentobi提供，使用伪元素。在那里，您不必两次插入文本，而且填充效果完美。 - Sebastian Templin

Answer 1

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

使用一个带有 overflow: hidden; 样式的 DIV 元素来显示评分范围的蓝色条形图。 然后你需要写出两组文字：

1. 在 DIV 条形图内部（overflow: hidden;），文字颜色为白色（在上层）
2. 在底层的 DIV 容器中，文字颜色为黑色。（容器）

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

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

<div style="position: relative; width: 250px; background: white; border: 1px solid #000; color: #000;">
<div style="position: absolute; z-index: 10; overflow: hidden; width: 105px; background-color: navy; white-space:nowrap; color: #FFF;">
    Between 4:00 and 6:00 blah blah
</div>
    Between 4:00 and 6:00 blah blah
</div>

它非常有效，因为如果栏的宽度恰好相当于字母的宽度，它就可以“切断”字母。看一下，我认为这正是你要找的。

- Jakub

---

@Anupam，这很简单粗糙，但是它证明了你只需要简单的CSS就可以实现这个功能，当然你不想像我一样使用内联样式。 - Jakub

有没有类似右对齐文本的实现思路？ - Travis Collins

尽管这种方法有些取巧，因为存在重复文本，但它确实非常聪明。 - Wesley Murch

不错的想法，但你可以在问题中添加必要的代码。 - Artjom B.

令人惊讶的是，你只用HTML和CSS就完成了这个。 - Chillin'

Answer 2

可以做到。

您可以将背景和前景颜色绑定到一个类中，并在文本上使用该类。例如，一个样式类具有黑色文本白色背景，另一个样式类具有白色文本黑色背景。您可以切换该类，文本将随着背景颜色更改。

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

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

- bardiir

---

我认为在这种情况下，文本是一个整体元素。 - Samuel Edwin Ward

Answer 3

确实，您需要使用JavaScript。我会通过以下方式解决问题：

1. 计算重叠部分的宽度（以像素为单位）。例如：width = ${"#container"}.width() - ${"#progressbar"}.width();

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

3. 在span之间插入上述字符串，如下所示：${"#container"}.html("<span class='highlight'>"+highlitedText+"</span>"+restOfTheText); 显然，highlitedText是包含第2步中字符的字符串，而restOfTheText是包含其余字符的字符串。

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

- Miguel S.

Answer 4

不，你不能仅通过CSS来实现它。你需要JavaScript。

使用jQuery / JavaScript，您可以检查元素是否应用了CSS规则，然后执行所需操作，例如：

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

还可以在这里阅读：Jquery：如何检查元素是否具有某些CSS类/样式

- Simone

---

谢谢Simone，JavaScript很好，你能给我一些例子或者什么的吗？我搜索了很多，不知道该搜索什么，所以没有任何有用的结果！！ - Anupam