html - 混合混合模式 : Multiply Bug in Firefox

Question

我正在尝试在 Firefox 中实现 mix-blend-mode，这似乎是受支持的，但我只在使用“multiply”时得到黑色元素。有谁知道为什么会这样？如何解决？

这是在 Codepen 中重新创建的问题的链接:http://codepen.io/anater/pen/xGWddq

.circle-red,
.circle-blue{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  mix-blend-mode: multiply;
}

.circle-red{
  background: red;
  top: 50%;
  left: 50%;
  transform: translate(-75%, -50%);
}

.circle-blue{
  background: blue;
  top: 50%;
  left: 50%;
  transform: translate(-25%, -50%);
}

这不会发生在 Chrome 或 Safari 中，它与 Firefox 隔离。

Answer 1

但是红色和蓝色相乘的正确结果是黑色

为了测试它，最好设置不同的颜色，例如青色和黄色

.circle-red,
.circle-blue{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  mix-blend-mode: multiply;
}

.circle-red{
  background: rgb(255, 255, 0);
  top: 50%;
  left: 50%;
  transform: translate(-75%, -50%);
}

.circle-blue{
  background: rgb(0, 255, 255);
  top: 50%;
  left: 50%;
  transform: translate(-25%, -50%);
}

<div class="circle-red"></div>
<div class="circle-blue"></div>

我无法再对其进行测试，但在以前版本的 Firefox 中，存在涉及 mix-blend-mode 和基本元素(在本例中为 body)缺少背景色的问题。

你能不能试试设置

body {
    background-color: white;
}