我知道这是一个老问题，但我想在我得知之前添加另一个我一直在使用的解决方案mix-blend-mode。
我们的想法是将信息复制在两个层中，即背景和前景，其中背景和前景具有不同的背景和文本颜色。这些在尺寸和文字方面是相同的。在这两者之间，我使用剪切框div将顶层裁剪为所需的宽度，显示未剪裁的顶层，并显示裁剪窗口外的背景图层。
这与接受的答案中的“Two div”解决方案类似，但使用额外的剪辑框。如果需要，它允许轻松居中文本，并简单，直接地选择颜色。
HTML：
CSS(我为令人困惑的id名称，“背景”和“前景”道歉)：.progress{
display:block;
margin:0;
/*Choosedesiredpadding/heightincoordinationwithfontsize*/
padding:10px;
height:28px;}#background{
position:relative;
/*Chooseabordertoyourliking,ornone*/
border:1pxsolidlightgray;
/*Chooseyourdesiredtextattributes*/
text-align:center;
font-family:Calibri,"SansSerif";
font-size:16pt;
/*Setthedesiredwidthofthewholeprogressbar*/
width:75%;
/*Choosethedesiredbackgroundandtextcolor*/
background-color:white;
color:black;}#foreground{
position:absolute;
left:0;
top:0;
/*Choosethedesiredbackgroundandtextcolors*/
background-color:navy;
color:white;}#boundbox{
position:absolute;
left:0;
top:0;
overflow:hidden;}
我使用jQuery以编程方式设置百分比进度，并确保前景的宽度与背景的宽度匹配，并且它们具有相同的文本。这也可以使用纯Javascript轻松完成。//Setforegroundwidthtobackgroundwidth//DothisafterDOMisready$('#foreground').width($('#background').width())//Baseduponaneventthatdeterminesacontentchange//youcansetthetextasinthebelowexamplepercent_complete=45/*Computea%completevalue*/$('#foreground').text(`${percent_complete}%complete`)$('#backgroundspan').text($('#foreground').text())$('#boundbox').css('width',`${percent_complete}%`)
这是一个小提琴：进度条。
我在Chrome，Firefox和Microsoft Edge中对此进行了测试。
