借助 CSS3 混合模式更改相对于背景颜色的文本颜色

Question

我尝试设置链接的颜色，以便它自动调整其颜色与其背景颜色相比。我搜索了这个问题，发现这可以在混合模式或背景混合模式的帮助下完成。我尝试但无法做出相同的行为。这是我的HTML和CSS代码。

.full-section {
min-height: 100vh;
}
.bg-black {
background-color: #000;
}
.bg-white {
background-color: #fff;
}
.bg-gray {
background-color: #e3e3e3;
}
.top-nav {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
zindex: 5;
overflow: hideen;
background-color: transparent;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.all-center {
align-items: center;
justify-content: center;
}
.align-end {
justify-content: flex-end;
}
.logo {
color: #fff;
text-decoration: none;
mix-blend-mode: difference;
}
.button {
background-color: #fff;
color: #000;
text-decoration: none;
width: 180px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
mix-blend-mode: difference;
background-blend-mode: difference;
}
.button:hover {
background-color: #000;
color: #fff;
text-decoration: none;
}

<div class="row top-nav flex all-center">
<div class="col-md-3">
<a href="#" class="logo">Logo</a>
</div>
<div class="col-md-9 flex align-end">
<a href="#" class="button">Contact Us</a>
</div>
</div>
<div class="row full-section bg-black">
</div>
<div class="row full-section bg-white">
</div>
<div class="row full-section bg-gray">
</div>
</div>

Answer 1

.full-section {
min-height: 100vh;
}
.bg-black {
background-color: #000;
}
.bg-white {
background-color: #fff;
}
.bg-gray {
background-color: #e3e3e3;
}
.top-nav {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
zindex: 5;
overflow: hideen;
background-color: transparent;
mix-blend-mode: difference;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.all-center {
align-items: center;
justify-content: center;
}
.align-end {
justify-content: flex-end;
}
.logo {
color: #fff;
text-decoration: none;
mix-blend-mode: difference;
}
.button {
background-color: #fff;
color: #000;
text-decoration: none;
width: 180px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
font-family: sans-serif;
}
.button:hover {
background-color: #000;
color: #fff;
text-decoration: none;
}

<div class="row top-nav flex all-center">
<div class="col-md-3">
<a href="#" class="logo">Logo</a>
</div>
<div class="col-md-9 flex align-end">
<a href="#" class="button">Contact Us</a>
</div>
</div>
<div class="row full-section bg-black">
</div>
<div class="row full-section bg-white">
</div>
<div class="row full-section bg-gray">
</div>
</div>

Answer 2

你也可以看看filter((，它也允许转换：

注意这两者如何通过不同的浏览器工作：

• https://caniuse.com/#feat=css-filters

• https://caniuse.com/#feat=mdn-css_properties_mix-blend-mode

---

filter(( 可能的例子：

.full-section {
min-height: 100vh;
}
.bg-black {
background-color: #000;
}
.bg-white {
background-color: #fff;
}
.bg-gray {
background-color: #e3e3e3;
}
.top-nav {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
z-index: 5;
overflow: hideen;
background-color: transparent;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.all-center {
align-items: center;
justify-content: center;
}
.align-end {
justify-content: flex-end;
}
.logo {
color: #fff;
text-decoration: none;
mix-blend-mode: difference;
}
.button {
background-color: #fff;
color: #000;
text-decoration: none;
width: 180px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition:0.5s;
}
.button:hover {
filter:invert(100%);
text-decoration: none;
}

<div class="row top-nav flex all-center">
<div class="col-md-3">
<a href="#" class="logo">Logo</a>
</div>
<div class="col-md-9 flex align-end">
<a href="#" class="button">Contact Us</a>
</div>
</div>
<div class="row full-section bg-black">
</div>
<div class="row full-section bg-white">
</div>
<div class="row full-section bg-gray">
</div>
</div>