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

Posted 2023-03-06

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

【英文标题】：Mix-blend-mode not working on Chrome but works as expected in Firefox and Chrome

【发布时间】：2021-05-30 13:19:45

【问题描述】：

我知道 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/

【问题讨论】：

我希望您查看您的标题：“混合混合模式在 Chrome 上不起作用，但在 Firefox 和 Chrome 中可以正常工作"

请阅读How do I ask a good question?和How to create a Minimal, Reproducible Example和take the tour

【参考方案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>