mix-blend-mode属性使用异常：导航栏元素不生效

我正在学习CSS，尝试用mix-blend-mode: difference让导航栏里的logo（<h1>元素）和菜单切换按钮反转下方内容，但没达到预期效果。奇怪的是这个属性在图片和自定义光标上能正常工作。我还试过给按钮div加backdrop-filter: invert(1)，但给logo设置mix-blend-mode后按钮就消失了。下面是我的HTML和CSS代码，求找出问题所在。

HTML代码 #

<body>
    <div class="cursor">
        <div class="cursor-small">

        </div>
        <div class="cursor-big"></div>
    </div>

    <nav>
        <div class="logo hoverable">
            <h1>LOGO</h1>
        </div>

        <div class="menu-toggle hoverable">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </nav>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="app.js"></script>
</body>

基础CSS代码 #

html {
  cursor: none;
}

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

body {
  font-family: serif;
  color: white;
  background-color: #530101;
}

光标CSS代码 #

.cursor {
  pointer-events: none;
  z-index: 9999;
  display: block;
  height: 0;
}
.cursor .cursor__small {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  z-index: 10001;
  mix-blend-mode: difference;
}
.cursor .cursor__big {
  background-color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  mix-blend-mode: difference;
  position: relative;
  z-index: 10001;
}

导航栏CSS代码 #

nav {
  position: sticky;
  top: 0;
  left: 0;
  height: var(--nav-height);
  width: 100%;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}
nav .logo h1 {
  position: relative;
  z-index: 1000;
  font-size: 60px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  mix-blend-mode: difference;
}
nav .menu-toggle {
  width: calc(40px + 1rem);
  cursor: pointer;
}
nav .menu-toggle div {
  position: relative;
  z-index: 10;
  width: 2.5rem;
  height: 0.25rem;
  margin: 0.5rem auto;
  transition: all 75ms ease-in-out;
  mix-blend-mode: difference;
}
nav .menu-toggle.toggled div:first-child {
  --translate-x: -0.5rem;
  transform: translate(var(--translate-x), var(--translate-y));
}
nav .menu-toggle.toggled div:last-child {
  --translate-x: 0.5rem;
  transform: translate(var(--translate-x), var(--translate-y));
}
nav .menu-toggle:hover div:first-child {
  --translate-y: -0.25rem;
  transform: translate(var(--translate-x), var(--translate-y));
}
nav .menu-toggle:hover div:last-child {
  --translate-y: 0.25rem;
  transform: translate(var(--translate-x), var(--translate-y));
}

问题分析与解决方案 #

核心问题 #

1. 导航栏无背景导致混合失效：mix-blend-mode的混合效果依赖元素的父级背景层，你的nav没有设置背景，内部元素只能和body背景混合，无法作用于下方滚动的内容。
2. 菜单按钮无背景色：菜单的三个div没有背景，mix-blend-mode: difference没有可混合的颜色，自然看不到效果。
3. 属性冲突导致按钮消失：backdrop-filter和mix-blend-mode在嵌套元素上混用会触发堆叠上下文冲突，导致元素被隐藏。

修复步骤 #

1. 给nav添加透明背景，确保混合能基于下方内容计算：

   nav {
     background-color: transparent;
   }
   

2. 给菜单按钮的线条添加白色背景，让混合效果生效：

   nav .menu-toggle div {
     background-color: #fff;
   }
   

3. 避免backdrop-filter和mix-blend-mode嵌套冲突：如果需要使用backdrop-filter，直接应用在nav上，不要和内部元素的mix-blend-mode混用。

修改后的完整导航栏CSS #

nav {
  position: sticky;
  top: 0;
  left: 0;
  height: var(--nav-height);
  width: 100%;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  background-color: transparent; /* 新增透明背景 */
  /* 可选：如需使用 backdrop-filter，添加在此处 */
  /* backdrop-filter: invert(1); */
}
nav .logo h1 {
  position: relative;
  z-index: 1000;
  font-size: 60px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  mix-blend-mode: difference;
}
nav .menu-toggle {
  width: calc(40px + 1rem);
  cursor: pointer;
}
nav .menu-toggle div {
  position: relative;
  z-index: 10;
  width: 2.5rem;
  height: 0.25rem;
  margin: 0.5rem auto;
  transition: all 75ms ease-in-out;
  mix-blend-mode: difference;
  background-color: #fff; /* 新增白色背景 */
}
/* 其余切换和hover样式保持不变 */

补充说明 #

自定义光标能正常生效是因为它的z-index极高，直接覆盖所有内容，混合效果基于页面最底层内容；而导航栏是sticky，必须有背景层才能让内部元素和下方滚动内容产生混合交互。修改后，当页面有滚动内容时，logo和菜单按钮就能正确反转下方内容的颜色了。

内容的提问来源于stack exchange，提问作者user7473613