html字体颜色随背景改变,根据背景颜色反转CSS字体颜色

我知道这是一个老问题，但我想在我得知之前添加另一个我一直在使用的解决方案mix-blend-mode。

我们的想法是将信息复制在两个层中，即背景和前景，其中背景和前景具有不同的背景和文本颜色。这些在尺寸和文字方面是相同的。在这两者之间，我使用剪切框div将顶层裁剪为所需的宽度，显示未剪裁的顶层，并显示裁剪窗口外的背景图层。

这与接受的答案中的“Two div”解决方案类似，但使用额外的剪辑框。如果需要，它允许轻松居中文本，并简单，直接地选择颜色。

HTML：

CSS(我为令人困惑的id名称，“背景”和“前景”道歉)：.progress {

display: block;

margin: 0;

/* Choose desired padding/height in coordination with font size */

padding: 10px;

height: 28px;}#background {

position: relative;

/* Choose a border to your liking, or none */

border: 1px solid lightgray;

/* Choose your desired text attributes */

text-align: center;

font-family: Calibri, "Sans Serif";

font-size: 16pt;

/* Set the desired width of the whole progress bar */

width: 75%;

/* Choose the desired background and text color */

background-color: white;

color: black;}#foreground {

position: absolute;

left: 0;

top: 0;

/* Choose the desired background and text colors */

background-color: navy;

color: white;}#boundbox {

position: absolute;

left: 0;

top: 0;

overflow: hidden;}

我使用jQuery以编程方式设置百分比进度，并确保前景的宽度与背景的宽度匹配，并且它们具有相同的文本。这也可以使用纯Javascript轻松完成。// Set foreground width to background width// Do this after DOM is ready$('#foreground').width($('#background').width())// Based upon an event that determines a content change// you can set the text as in the below examplepercent_complete = 45   /* Compute a % complete value */$('#foreground').text(`${percent_complete}% complete`)$('#background span').text($('#foreground').text())$('#boundbox').css('width', `${percent_complete}%`)

这是一个小提琴：进度条。

我在Chrome，Firefox和Microsoft Edge中对此进行了测试。