html - CSS位置:固定+混合混合模式:差异问题
问题描述
我正在尝试创建一个粘性导航栏,它在滚动背景时会做出反应。我尝试过mix-blend-mode: difference
,这正是我正在寻找的。但是因为我正在使用position: sticky
或者position: fixed
这就是发生的事情:
不幸的是,当它点击导航栏时,整个字体正在反转它的颜色。这是一个示例,当它相互滚动时应该是什么样子:
在这个例子中,我使用position: absolute
了它,它看起来非常好。
这是我到目前为止编写的代码:
HTML & CSS
.nav-bar {
width: calc(100vw - 3rem);
margin: 0 auto;
padding-top: 40px;
position: sticky;
top: 0;
}
.nav-bar ul {
display: flex;
justify-content: space-between;
top: 200px;
}
.nav-bar ul li {
list-style: none;
}
.nav-bar ul li img {
width: 30px;
}
.nav-bar ul li .line {
width: 25px;
height: 5px;
background: #000;
margin-bottom: 3px;
}
.nav-bar ul li .line:last-child {
margin-bottom: 0;
}
.headline-container {
padding-top: 100px;
}
.headline-container .headline-item {
width: calc(100vw - 3rem);
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.headline-container .headline-item span {
font-size: 7vw;
font-family: 'Montserrat', sans-serif;
font-style: italic;
font-weight: bold;
mix-blend-mode: difference;
color: white;
}
<div class="nav-bar">
<nav>
<ul>
<li class="test">
<img src="./img/logo_nav.svg" alt="logo" />
</li>
<li>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</li>
</ul>
</nav>
</div>
<div class="headline-container">
<div class="headline-item">
<span>W</span>
<span>E</span>
<span>B</span>
<span>A</span>
<span>P</span>
<span>P</span>
<span>L</span>
<span>I</span>
<span>C</span>
<span>A</span>
<span>T</span>
<span>I</span>
<span>O</span>
<span>N</span>
</div>
<div class="headline-item">
<span>D</span>
<span>E</span>
<span>S</span>
<span>I</span>
<span>G</span>
<span>N</span>
</div>
<div class="headline-item">
<span>B</span>
<span>R</span>
<span>A</span>
<span>N</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
<div class="headline-item">
<span>C</span>
<span>O</span>
<span>M</span>
<span>M</span>
<span>U</span>
<span>N</span>
<span>I</span>
<span>C</span>
<span>A</span>
<span>T</span>
<span>I</span>
<span>O</span>
<span>N</span>
</div>
</div>
解决方案
对我来说,这看起来像是铬问题。我使用谷歌浏览器并设置背景颜色是我的解决方案。
这里的错误。
body {
background-color: white;
}
.nav-bar {
width: calc(100vw - 3rem);
margin: 0 auto;
padding-top: 40px;
position: sticky;
top: 0;
}
.nav-bar ul {
display: flex;
justify-content: space-between;
top: 200px;
}
.nav-bar ul li {
list-style: none;
}
.nav-bar ul li img {
width: 30px;
}
.nav-bar ul li img .line {
width: 25px;
height: 5px;
background: #000;
margin-bottom: 3px;
}
.nav-bar ul li img .line:last-child {
margin-bottom: 0;
}
.headline-container {
padding-top: 100px;
}
.headline-container .headline-item {
width: calc(100vw - 3rem);
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.headline-container .headline-item span {
font-size: 7vw;
font-family: 'Montserrat', sans-serif;
font-style: italic;
font-weight: bold;
mix-blend-mode: difference;
color: white;
}
<div class="nav-bar">
<nav>
<ul>
<li class="test">
<img src="https://i.stack.imgur.com/72XoY.png" width="30px" height="30px" />
</li>
<li>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</li>
</ul>
</nav>
</div>
<div class="headline-container">
<div class="headline-item">
<span>W</span>
<span>E</span>
<span>B</span>
<span>A</span>
<span>P</span>
<span>P</span>
<span>L</span>
<span>I</span>
<span>C</span>
<span>A</span>
<span>T</span>
<span>I</span>
<span>O</span>
<span>N</span>
</div>
<div class="headline-item">
<span>D</span>
<span>E</span>
<span>S</span>
<span>I</span>
<span>G</span>
<span>N</span>
</div>
<div class="headline-item">
<span>B</span>
<span>R</span>
<span>A</span>
<span>N</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
<div class="headline-item">
<span>C</span>
<span>O</span>
<span>M</span>
<span>M</span>
<span>U</span>
<span>N</span>
<span>I</span>
<span>C</span>
<span>A</span>
<span>T</span>
<span>I</span>
<span>O</span>
<span>N</span>
</div>
</div>
推荐阅读
- javascript - 精简服务器不工作
- swift - 在 UITextView 中设置密码保护
- python - 从列表中创建字典的 Pythonic 方法,其中键是在另一个列表中找到的元素,值是键之间的元素
- entity-framework - 自定义客户端和资源表 Identity Server 4
- angular - (SystemJS) XHR 错误 (404) 加载 https://unpkg.com
- java - 解析 JSON 对象文件并转换为 JSON 数组
- database - 使用 ClickHouse 分布式表上的 where 过滤器进行不同的选择失败
- c# - 选中或未选中 DataGridViewCheckBoxColumn 上的 C# datagridview 过滤器
- sql-server - 更新临时表的 SQL 表
- angular - 使用 ionic 3 在本地 pc 上传图像文件