css - 我可以使用什么 CSS 来让文本无论背后是什么都可读？

Question

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

我想要实现的是以某种方式将字体颜色指定为背景的差异。我记得很多年前在 DHTML 中看到过允许这样做的东西。我要找的结果如下

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

我相信有一种方法可以使用 CSS/CSS3 做到这一点，但我找不到相关信息。

生成的样式信息应包含在 CSS 文件的“p”样式中。没有“技巧”，例如拆分数据或使用 JavaScript 等更改 HTML。<p> 中的数字元素应保持完整和完整。

body {
  background: #000000; 
}

p {
	background: #ffffff;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAA1BMVEVilQmZw+RvAAAAAXRSTlOF3TSvyQAAAD1JREFUeNrtwQENAAAAwqD3T20PBxQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBmnQgAAd4aVNwAAAAASUVORK5CYII=");
	background-repeat: repeat-y;
    background-size: 0% auto;
	color: #ffffff;
	padding: 5px;
	text-align: center;
	border: 1px solid #3E8096;
	display: block; 
}

<p style="background-size: 50% auto !important">50</p>
<p style="background-size: 75% auto !important">75</p>
<p style="background-size: 20% auto !important">20</p>

注意:

I was considering a drop-shadow, however this would result in a funny looking font when it is a white font. I also considered encapsulating the text in a border, however the ideal result would be for the font to adjust based on background.

Answer 1

body { background: navy }

div {
    background-color: white;
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    font-size: 50px;
    text-align: center;
    position: relative;
    color: red;
}

span {
    content: '';
    position: absolute;
    background: cyan;
    width: 50%;
    top: 0;
    left: 0;
    height: 100%;
    display: inline-block;
    mix-blend-mode: difference;
}

<div>
   0000 <span></span>
</div>

body { background: navy }

div {
    background-color: white;
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    font-size: 50px;
    text-align: center;
    position: relative;
    color: red;
}

div:after {
    content: '';
    position: absolute;
    background: cyan;
    width: 50%;
    top: 0;
    left: 0;
    height: 100%;
    display: inline-block;
    mix-blend-mode: difference;
}

<div>00000</div>