Html CSS位置：固定+；混合模式：差异问题

我试图创建一个粘性导航条，在滚动背景时会做出反应。我尝试了

混合模式：difference

，这正是我想要的。但由于我使用的是

position:sticky

或

position:fixed

这就是发生的情况：

点击导航栏前关闭：

在这里，它点击导航栏：

不幸的是，当它点击导航栏时，整个字体正在反转颜色。下面是一个示例，当它彼此滚动时，它应该是什么样子：

汉堡和标志创造了一个很好的倒置效果：

在这个例子中，我使用了

position:absolute

，它看起来非常好

以下是我到目前为止编写的代码：

HTML和CSS

.nav栏{
宽度：计算（100vw-3rem）；
保证金：0自动；
填充顶部：40px；
位置：粘性；
排名：0；
}
.导航杆{
显示器：flex；
证明内容：之间的空间；
顶部：200px；
}
.导航栏ul li{
列表样式：无；
}
.nav bar ul li img{
宽度：30px；
}
.导航条ul.li.线{
宽度：25px；
高度：5px；
背景：#000；
利润底部：3倍；
}
.导航栏ul li.行：最后一个孩子{
页边距底部：0；
}
.标题容器{
填充顶部：100px；
}
.标题容器.标题项{
宽度：计算（100vw-3rem）；
保证金：0自动；
显示器：flex；
证明内容：之间的空间；
}
.标题容器.标题项范围{
字体大小：7vw；
字体系列：“蒙特塞拉特”，无衬线；
字体：斜体；
字体大小：粗体；
混合模式：差异化；
颜色：白色；
}

W
E
B
A.
P
P
L
我
C
A.
T
我
O
N
D
E
s
我
G
N
B
R
A.
N
D
我
N
G
C
O
M
M
U
N
我
C
A.
T
我
O
N

对我来说，这似乎是铬的问题。我使用谷歌Chrome，设置背景色是我的解决方案

给你

正文{
背景色：白色；
}
.导航栏{
宽度：计算（100vw-3rem）；
保证金：0自动；
填充顶部：40px；
位置：粘性；
排名：0；
}
.导航杆{
显示器：flex；
证明内容：之间的空间；
顶部：200px；
}
.导航栏ul li{
列表样式：无；
}
.nav bar ul li img{
宽度：30px；
}
.导航杆ul li仪表线{
宽度：25px；
高度：5px；
背景：#000；
利润底部：3倍；
}
.导航栏ul li图像行：最后一个孩子{
页边距底部：0；
}
.标题容器{
填充顶部：100px；
}
.标题容器.标题项{
宽度：计算（100vw-3rem）；
保证金：0自动；
显示器：flex；
证明内容：之间的空间；
}
.标题容器.标题项范围{
字体大小：7vw；
字体系列：“蒙特塞拉特”，无衬线；
字体：斜体；
字体大小：粗体；
混合模式：差异化；
颜色：白色；
}

W
E
B
A.
P
P
L
我
C
A.
T
我
O
N
D
E
s
我
G
N
B
R
A.
N
D
我
N
G
C
O
M
M
U
N
我
C
A.
T
我
O
N

我已经解决了这个问题：

<div class="fixed_menu">
    <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>

  <div class="section section1">
    <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>
  </div>
</div>

---

我不知道到底发生了什么，但由于我重新构造了所有内容，并使用了CSS而不是SCS，我想我可能在某个地方出现了打字错误，或者类似的问题

我只是想编辑你的帖子，使你的代码在帖子中无法运行。将导致更好的理解。不幸的是，有人已经发布了一个编辑，所以我无法完成更改。谢谢你的回答，不幸的是，这对我来说不起作用。我回答“设置背景色”，但fotgot说“身体元素”。你看到并尝试过这个：body{背景色：white；}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.section {
 background-color: white;
}

.section1 h1 {
 padding-top: 150px;
 text-align: center;
}

.fixed_menu {
 position: fixed;
 width: calc(100vw - 3rem);
 mix-blend-mode: difference;
 z-index: 2;
 left: 50%;
 top: 30px;
 transform: translateX(-50%);
}

.nav-bar {
 width: calc(100vw - 3rem);
 /* margin: 0 auto; */
}

.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: #fff;
 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;
}