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

Question

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

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

Mix-blend-mode not working on Chrome but works as expected in Firefox and Chrome

html

css

safari

firefox

google-chrome