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

Question

我知道 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;
          }
        }
      }
    }
  }
}

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

Answer 1

这是由于使用了大的负 z-index。删除它并确保您对需要高于它的元素具有正 z-index。还要确保将背景设置为 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;
}

<div class="wave">
  <svg viewBox="0 0 414 124" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 87L9 74C17 62 35 37 52 27C69 17 86 21 104 27C121 33 138 41 155 37C173 33 190 17 207 27C224 37 242 54 259 54C276 54 293 37 311 27C328 17 345 33 362 54C380 74 397 99 405 112L414 124V0H405C397 0 380 0 362 0C345 0 328 0 311 0C293 0 276 0 259 0C242 0 224 0 207 0C190 0 173 0 155 0C138 0 121 0 104 0C86 0 69 0 52 0C35 0 17 0 9 0H0V87Z" fill="#FA8072"/>
  </svg>
</div>

<nav>
  <ul>
    <li><a href="">home</a></li>
    <li><a href="">about</a></li>
    <li><a href="">contact</a></li>
  </ul>
</nav>