CSS-根据背景更改文本颜色 [英] CSS - Change text color depending on background
本文介绍了CSS-根据背景更改文本颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个简单的布局,包括三个全高div和一个固定的标题栏.
I have a simple layout consisting of three full height divs and a fixed header bar.
body,html {
padding:0;
margin:0;
}
.header {
position:fixed;
width:100%;
height:50px;
color:white;
margin:20px;
}
.section1 {
background:black;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
color:white;
}
.section2 {
background:white;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
}
.section3 {
background:black;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
color:white;
}
<div class="header">
Header Content
</div>
<div class="wrapper">
<div class="section1">
Section One Content
</div>
<div class="section2">
Section Two Content
</div>
<div class="section3">
Section Three Content
</div>
</div>
我试图使标题栏文本在具有白色背景的部分上滚动时变为黑色.
I am trying to make the header bar text colour change to black when it rolls over the section with the white background.
我已经看到了几个可以实现此目标的jQuery插件,但我正在尝试避免任何不必要的脚本.
I have seen a couple of jQuery plugins which should work to achieve this but I am trying to avoid any unnecessary scripts.
CSS mix-blend-mode
函数是否可以实现这一目标?有没有人能举例说明他们可以实现类似的目标?
Would the CSS mix-blend-mode
function allow me to achieve this? Does anybody have an example they can point me to of something similar being achieved?
推荐答案
You can use mix-blend-mode:difference
body,
html {
padding: 0;
margin: 0;
}
.header {
position: fixed;
width: 100%;
height: 50px;
margin: 20px;
color:#fff;
mix-blend-mode: difference;
}
.section1,
.section2,
.section3{
background: black;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.section2 {
background: white;
color:#000;
}
<div class="header">
Header Content
</div>
<div class="wrapper">
<div class="section1">
Section One Content
</div>
<div class="section2">
Section Two Content
</div>
<div class="section3">
Section Three Content
</div>
</div>
这篇关于CSS-根据背景更改文本颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文