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

Question

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

Answer 1

有一个名为mix-blend-mode的CSS属性,但IE不支持它.我建议使用伪元素.如果你想支持IE6和IE7,你也可以使用两个DIV而不是伪元素.

.inverted-bar {
    position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
    padding: 10px 0;
    text-indent: 10px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-content);
}

.inverted-bar:before {
    background-color: aqua;
    color: red;
    width: 100%;
}

.inverted-bar:after {
    background-color: red;
    color: aqua;
    width: 20%;
}

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

Answer 2

是的,现在有.使用mix-blend-mode,可以使用CSS完成.

http://jsfiddle.net/1uubdtz6/

div {
    position:absolute;
    height:200px
}

/* A white bottom layer */
#whitebg { 
    background: white; 
    width:400px; 
    z-index:1
}

/* A black layer on top of the white bottom layer */
#blackbg { 
    background: black; 
    width:100px; 
    z-index:2
}

/* Some white text on top with blend-mode set to 'difference' */
span {
    position:absolute; 
    font-family: Arial, Helvetica; 
    font-size: 100px; 
    mix-blend-mode: difference;
    color: white;
    z-index: 3
}

/* A red DIV over the scene with the blend-mode set to 'screen' */
#makered { 
    background-color: red;
    mix-blend-mode: screen;
    width:400px; 
    z-index:4
}

<div id="whitebg"></div>
<div id="blackbg"></div>
<div id="makered"></div>

<span>test</span>

目前,这是最前沿的,并没有得到所有浏览器的广泛支持 - 但有一天它可能是标准的.您可能需要启用混合模式功能才能使其正常工作.

http://html.adobe.com/webplatform/enable/

Answer 3

我知道这是一个老问题，但我想添加另一个我在了解mix-blend-mode.

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

这类似于已接受答案中的“Two div”解决方案，但使用了额外的剪辑框。该解决方案的优势在于，如果需要，可以轻松将文本居中，并且可以简单、直接地选择颜色。

HTML：

<div class='progress' id='back'>
  <span></span>
  <div class='progress' id='boundbox'>
    <div class='progress' id='front'>
    </div>
  </div>
</div>

CSS：

.progress {
  display: block;
  margin: 0;

  /* Choose desired padding/height in coordination with font size */
  padding: 10px;
  height: 28px;
}

#back {
  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;
}

#front {
  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 *front* width to *back* width
// Do this after DOM is ready
$('#front').width($('#back').width())

// Based upon an event that determines a content change
// you can set the text as in the below example
percent_complete = 45  // obtain this value from somewhere; 45 is just a test

$('#front').text(percent_complete.toString() + '% complete')
$('#back span').text($('#front').text())
bb_width = (percent_complete * $('#back').width())/100
$('#boundbox').css('width', bb_width.toString())

这是一个小提琴：Progress bar。

我在 Chrome、Firefox、Microsoft Edge 和 IE 版本 11 中对此进行了测试。