我可以使用什么样的CSS使文本无论背后是什么都可读？

在下面的示例中，我演示了颜色完美的问题，不同%的部分会导致部分或全部文本被遮挡

我想实现的是，以某种方式将字体颜色指定为背景的差异。我记得很多年前在DHTML中看到了一些允许这种情况的东西。我正在寻找的结果如下

• 在50%的样本中，“5”为白色，“0”为黑色
• 在75%的样本中，“75”为白色
• 在20%的样本中，“20”为黑色

我相信有一种方法可以使用CSS/CSS3实现这一点，但我无法找到有关它的信息

结果样式信息应包含在CSS文件的“p”样式中。没有像拆分数据或使用JavaScript/等更改HTML这样的“技巧”。

元素中的数字应该保持完整和灵活

正文{
背景：#000000；
}
p{
背景：#ffffff；
背景图片：url（“数据：image/png；base64，ivborw0kggoaaaansuheugaaamgaaaadiacamaacahl6saaaa1bmvevilqmzw+rvaaaaa1arstlof3tsvyqaaa1jrefuenqenaaaawqd3t20pbxqaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaavork5cyii=”）；
背景重复：重复-y；
背景尺寸：0%自动；
颜色：#ffffff；
填充物：5px；
文本对齐：居中；
边框：1px实心#3E8096；
显示：块；
}

50
75
20
body{背景：海军}
div{
背景色：白色；
显示：内联块；
边框：1px纯红；
宽度：200px；
字体大小：50px；
文本对齐：居中；
位置：相对位置；
颜色：红色；
}
跨度{
内容：''；
位置：绝对位置；
背景：青色；
宽度：50%；
排名：0；
左：0；
身高：100%；
显示：内联块；
混合模式：差异化；
}

0000
@Rhumborl-那句简单的话确实给我的早晨带来了幽默。我不是在寻找一个纯色替代品，它可以在示例中描述的两种颜色上工作。我正在寻找某种形式的文本屏蔽/剪切/任何操纵文本外观的功能，使其无论背景如何都可见。例如，倒转，或其他什么。问题是搜索时几乎没有什么信息（google/etc）。我可以剪辑整个背景，但文本仍然保持不变——例如
混合模式：screen也许会有帮助。它不会自动检测背景颜色并调整文本颜色，但它确实提供了一个静态解决方案。@sideroxylon-是的，这看起来确实可行。您能提供一个不依赖于使用CSS硬编码的标记设置的元素内容的示例吗？我还将试着四处玩转，看看是否可以简化调用函数。@sideroxylon是的，我开始使用相同的想法，但仍然需要一个属性。CSS中没有类似于
content:text（）
的东西，这有点令人恼火。@Rhumborl-而且，也没有办法使用
content:
添加html元素，因此排除了使用
：：before
和
：：after
的动态内容。我现在正在仔细研究各种规格，看看元素中是否有一个仅用于文本/内容部分的选择器。你说的是真的。。当
：text
可以使用css进行样式设置时，将不再需要
：before
，
：before
或任何元素嵌套。我现在也在测试它，我看到了同样的情况。同时也找到了同样的解决方案。将很快更新。@SanuelJackson我也用改进的答案更新了答案。在这里，我们可以用任何可接受的值指定主div的宽度，用百分比值指定内部或伪元素的宽度。你是怎么想到“青色”作为替代“红色”的呢。只是看看数字转换，因为我使用不同的颜色。再次感谢，干得好。另外，是的，这个答案对我来说很好，内联css/元素比我的要少得多，使得整个渲染更小。将其用作我正在编写的可编辑数据网格的一部分。我喜欢使用
width:50%
而不是
background size:50%auto来应用%值！重要信息
，也不需要任何图像。红色的主要原因是我在css技巧中学习的，我尝试了红色、蓝色和黑色，当我将白色应用于当前内部伪元素或span元素时，结果是覆盖部分上的字体显示为青色表示红色。所以我就改编了。