Html 混合混合模式在Chrome上不起作用，但在Firefox和Chrome上可以正常工作

我知道Chrome中的透明背景无法使用混合混合模式设置动画，但我的背景颜色设置为rgba（0,0,0,0.1），效果在Chrome中仍然不起作用

nav {
  position: relative;
  z-index: 1000;
  padding-top: 100px;
  mix-blend-mode: difference;

  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    max-width: 400px;
    width: 100%;
    
    li {
      margin: 0 30px;
      
      a {
        z-index: 1;
        position: relative;
        color: red;
        text-decoration: none;
        
        &:before {
          content: '';
          z-index: -1;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          height: 0px;
          width: 0px;
          border-radius: 100px;
          background-color: rgba(0,0,0,0.1);
          transition: 0.25s ease all;
        }
        
        &:hover {
          color: #000;

          &:before {
            height: 100px;
            width: 100px;
            background-color: red;
          }
        }
      }
    }
  }
}

---

这是由于使用了较大的负z指数。移除它，并确保需要位于其上方的元素具有正z索引。还要确保将背景设置为html和正文

正文{
高度：1000px；
字体系列：无衬线；
背景：#fff；
}
html{
背景：#fff；
}
.挥手{
位置：固定；
宽度：100%；
}
.波形svg{
宽度：100%；
}
导航{
位置：相对位置；
z指数：1000；
填充顶部：100px；
混合模式：差异化；
}
导航ul{
显示器：flex；
柔性包装：包装；
证明内容：中心；
保证金：自动；
最大宽度：400px；
宽度：100%；
}
李国荣{
利润率：0.30px；
字体大小：粗体；
}
海军ulli a{
z指数：1；
位置：相对位置；
颜色：番茄；
文字装饰：无；
}
海军李娜：以前{
内容：“；
z指数：-1；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
高度：0px；
宽度：0px；
边界半径：100px；
背景色：rgba（0,0,0,0.1）；
过渡：0.25秒缓解所有；
}
导航ulli a：悬停{
颜色：#000；
}
导航ulli a：悬停：之前{
高度：100px；
宽度：100px；
背景色：番茄；
}

我想让你回顾一下你的标题：“混合模式在Chrome上不起作用，但在Firefox和Chrome上却能像预期的那样起作用”请阅读，非常感谢！这就解决了问题。