CSS位置：固定+混合混合模式：差异问题答案

【问题标题】：CSS position: fixed + mix-blend-mode: difference issueCSS位置：固定+混合混合模式：差异问题
【发布时间】：2020-12-27 06:35:56
【问题描述】：

我正在尝试创建一个粘性导航栏，该导航栏在滚动背景时会做出反应。我尝试了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>

【问题讨论】：

我只是想编辑您的帖子，使您的代码可以从帖子中运行。会带来更好的理解。不幸的是，有人已经发布了编辑，所以我无法完成更改。

标签： html css css-position mix-blend-mode

【解决方案1】：

对我来说，这看起来像是铬问题。我使用谷歌浏览器并设置背景颜色是我的解决方案。

这里是bug。

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>

【讨论】：

感谢您的回答，很遗憾这对我没有用。
我回答“设置背景颜色”，但忘了说“身体元素”。你有没有看到并尝试过这个：body { background-color: white; }

【解决方案2】：

我已经解决了这个问题：

<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>

* {
 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;
}

我不知道到底发生了什么，但由于我重组了所有内容，并使用 CSS 而不是 SCSS，我想我在某个地方有错字，或者类似的东西

【讨论】：