Mix-blend-mode在Chrome上不起作用，但在Firefox和Chrome上可以正常工作

Question

我知道Chrome中的透明背景无法使用mix-blend模式进行动画处理，但我的背景色设置为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;
          }
        }
      }
    }
  }
}

https://jsfiddle.net/p2134Lde/1/

Answer 1

这是因为使用了大的负z指数。删除它，并确保需要在其上的元素具有正的z索引。还要确保将背景设置为html和body。

​

body {
  height: 1000px;
  font-family: sans-serif;
  background:#fff;
}
html {
  background:#fff;
}

.wave {
  position: fixed;
  width: 100%;
}
.wave svg {
  width: 100%;
}

nav {
  position: relative;
  z-index: 1000;
  padding-top: 100px;
  mix-blend-mode: difference;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  max-width: 400px;
  width: 100%;
}
nav ul li {
  margin: 0 30px;
  font-weight: bold;
}
nav ul li a {
  z-index: 1;
  position: relative;
  color: tomato;
  text-decoration: none;
}
nav ul li a: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;
}
nav ul li a:hover {
  color: #000;
}
nav ul li a:hover:before {
  height: 100px;
  width: 100px;
  background-color: tomato;
}

home
    about
    contact

​