Shopware 6中SVG/PNG叠加视频mix-blend-mode:difference无效求助

常见原因及对应修复步骤 #

• 堆叠上下文阻断混合：视频或Logo容器如果设置了opacity（非1）、transform、will-change这类属性，会生成独立的堆叠上下文，导致混合模式无法跨上下文生效。
  修复：检查并移除这些多余属性，比如：

  #gr-logo, .video-container {
    opacity: unset;
    transform: none;
    will-change: unset;
  }
  

• 容器背景遮挡混合效果：如果Logo的父容器有背景色，mix-blend-mode只会作用于容器背景，而非下方的视频。
  修复：给Logo容器设置透明背景，并直接在Logo元素上应用混合模式：

  @media (max-width: 991px) {
    #gr-logo {
      background: transparent !important;
      z-index: 1;
    }
    #gr-logo svg {
      mix-blend-mode: difference;
    }
  }
  

• 视频元素的隔离属性：视频如果设置了isolation: isolate，会强制创建堆叠上下文，阻断混合。
  修复：移除该属性，调整视频层级：

  video {
    isolation: unset;
    z-index: 0;
  }
  

• SVG填充属性问题：SVG的path如果用了半透明填充，可能导致混合模式表现异常。
  修复：给SVG path设置纯实色填充测试：

  #gr-logo svg path {
    fill: #ffffff;
    mix-blend-mode: difference;
  }
  

内容的提问来源于stack exchange，提问作者Thomas Högg