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

Question

根据背景颜色反转CSS字体颜色是否有一个CSS属性反转font-color依赖于background-color这张图片？

Answer 1

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

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

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

HTML：

<div class='progress' id='background'>
  <span></span>
  <div class='progress' id='boundbox'>
    <div class='progress' id='foreground'>
    </div>
  </div></div>

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