如何根据背景颜色设置文字颜色？

Question

我需要根据背景颜色更改文本颜色。我可以使用

mix-blend-mode: difference

和

filter: invert(1)

来达到我需要的效果，但颜色不太正确。

例如，在这个 JSFiddle 上：https://jsfiddle.net/47bLtjum/ 您可以看到“菜单”文本在灰白色背景上为橙色，但在橙色背景上需要为白色。有没有办法指定它需要的颜色？我基本上需要它浅色背景上的橙色和橙色背景上的白色

谢谢:)

Answer 1

我在网上找到了这段代码。基本上你从黑白开始。您的背景可以是任何黑白图案，然后您的前景（文本）的样式为

color: white; mix-blend-mode: difference

。然后在整个事物上放置一个覆盖层，其背景颜色为您选择的，样式为

mix-blend-mode: screen

.

    div {
        position:absolute;
        height:200px
    }

    #whitebg { 
        background: white; 
        width:400px; 
        z-index:1;

    }

    #blackbg { 
        background: black; 
        width:100px; 
        z-index:2;
    }
    span {
        position:absolute; 
        font-family: Arial, Helvetica; 
        font-size: 100px; 
        mix-blend-mode: difference;
        color: white;
        z-index: 3;
    }
    #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>

您可以按照下面的代码片段将它应用到您的设计中。但是叠加技术意味着你只能在你只想要白色加上你选择的单一颜色的区域真正使用它。

body {
  margin: 1em;
}
.wrapper {
  position: relative;
}
.section-1,.section-2 {
  height: 30vh;
  background: white;
}
.section-2 {
  background: black;
}
.menu {
  color: white;
  position: fixed;
  mix-blend-mode: difference;
  font-size: 2em;
}
.wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f95b03;
  mix-blend-mode: screen;
}

<div class="wrapper">
  <div class="menu">MENU</div>
  <div class="section-1"></div>
  <div class="section-2"></div>
  <div class="section-1"></div>
  <div class="section-2"></div>
  <div class="section-1"></div>
  <div class="section-2"></div>
  <div class="section-1"></div>
  <div class="section-2"></div>
</div>