根据背景颜色反转CSS字体颜色

Question

根据背景颜色反转CSS字体颜色

是否有一个CSS属性反转font-color依赖于background-color这张图片？

Answer 1

我知道这是一个老问题，但我想在我得知之前添加另一个我一直在使用的解决方案mix-blend-mode。我们的想法是将信息复制在两个层中，即背景和前景，其中背景和前景具有不同的背景和文本颜色。这些在尺寸和文字方面是相同的。在这两者之间，我使用剪切框div将顶层裁剪为所需的宽度，显示未剪裁的顶层，并显示裁剪窗口外的背景图层。这与接受的答案中的“Two div”解决方案类似，但使用额外的剪辑框。如果需要，它允许轻松居中文本，并简单，直接地选择颜色。HTML：<div&nbsp;class='progress'&nbsp;id='background'> &nbsp;&nbsp;<span></span> &nbsp;&nbsp;<div&nbsp;class='progress'&nbsp;id='boundbox'> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class='progress'&nbsp;id='foreground'> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;</div></div>CSS（我为令人困惑的id名称，“背景”和“前景”道歉）：.progress&nbsp;{ &nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;margin:&nbsp;0; &nbsp;&nbsp;/*&nbsp;Choose&nbsp;desired&nbsp;padding/height&nbsp;in&nbsp;coordination&nbsp;with&nbsp;font&nbsp;size&nbsp;*/ &nbsp;&nbsp;padding:&nbsp;10px; &nbsp;&nbsp;height:&nbsp;28px;}#background&nbsp;{ &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;/*&nbsp;Choose&nbsp;a&nbsp;border&nbsp;to&nbsp;your&nbsp;liking,&nbsp;or&nbsp;none&nbsp;*/ &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;lightgray; &nbsp;&nbsp;/*&nbsp;Choose&nbsp;your&nbsp;desired&nbsp;text&nbsp;attributes&nbsp;*/ &nbsp;&nbsp;text-align:&nbsp;center; &nbsp;&nbsp;font-family:&nbsp;Calibri,&nbsp;"Sans&nbsp;Serif"; &nbsp;&nbsp;font-size:&nbsp;16pt; &nbsp;&nbsp;/*&nbsp;Set&nbsp;the&nbsp;desired&nbsp;width&nbsp;of&nbsp;the&nbsp;whole&nbsp;progress&nbsp;bar&nbsp;*/ &nbsp;&nbsp;width:&nbsp;75%; &nbsp;&nbsp;/*&nbsp;Choose&nbsp;the&nbsp;desired&nbsp;background&nbsp;and&nbsp;text&nbsp;color&nbsp;*/ &nbsp;&nbsp;background-color:&nbsp;white; &nbsp;&nbsp;color:&nbsp;black;}#foreground&nbsp;{ &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;/*&nbsp;Choose&nbsp;the&nbsp;desired&nbsp;background&nbsp;and&nbsp;text&nbsp;colors&nbsp;*/ &nbsp;&nbsp;background-color:&nbsp;navy; &nbsp;&nbsp;color:&nbsp;white;}#boundbox&nbsp;{ &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;overflow:&nbsp;hidden;}我使用jQuery以编程方式设置百分比进度，并确保前景的宽度与背景的宽度匹配，并且它们具有相同的文本。这也可以使用纯Javascript轻松完成。//&nbsp;Set&nbsp;foreground&nbsp;width&nbsp;to&nbsp;background&nbsp;width//&nbsp;Do&nbsp;this&nbsp;after&nbsp;DOM&nbsp;is&nbsp;ready$('#foreground').width($('#background').width())//&nbsp;Based&nbsp;upon&nbsp;an&nbsp;event&nbsp;that&nbsp;determines&nbsp;a&nbsp;content&nbsp;change//&nbsp;you&nbsp;can&nbsp;set&nbsp;the&nbsp;text&nbsp;as&nbsp;in&nbsp;the&nbsp;below&nbsp;examplepercent_complete&nbsp;=&nbsp;45&nbsp;&nbsp;&nbsp;/*&nbsp;Compute&nbsp;a&nbsp;%&nbsp;complete&nbsp;value&nbsp;*/$('#foreground').text(`${percent_complete}%&nbsp;complete`)$('#background&nbsp;span').text($('#foreground').text())$('#boundbox').css('width',&nbsp;`${percent_complete}%`)这是一个小提琴：进度条。我在Chrome，Firefox和Microsoft Edge中对此进行了测试。