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

慕侠2389804

我知道这是一个老问题，但我想在我得知之前添加另一个我一直在使用的解决方案mix-blend-mode。我们的想法是将信息复制在两个层中，即背景和前景，其中背景和前景具有不同的背景和文本颜色。这些在尺寸和文字方面是相同的。在这两者之间，我使用剪切框div将顶层裁剪为所需的宽度，显示未剪裁的顶层，并显示裁剪窗口外的背景图层。这与接受的答案中的“Two div”解决方案类似，但使用额外的剪辑框。如果需要，它允许轻松居中文本，并简单，直接地选择颜色。HTML：

  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中对此进行了测试。