Question

我试图在Firefox中实现混合混合模式，这似乎得到支持，但在使用＆＃39;乘以＆＃39;时我只获得黑色元素。有谁知道为什么会这样？如何解决？

以下是在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中，存在一个问题，涉及混合混合模式和基本元素（在本例中为正文）缺少背景颜色。

您可以尝试设置

body {
    background-color: white;
}

Answer 2

我有类似的问题，这解决了我：设置你的颜色（乘以）使用rgba和＆＃34; a＆＃34;值为0.99而不是普通rgb。

Answer 3

这似乎是由于FF for Mac中的一个错误：

https://bugzilla.mozilla.org/show_bug.cgi?id=1135271

对我有用的解决方案（使用矩形DIV）正在为div应用透明轮廓！

请参阅：

https://medium.com/@maykelesser/how-to-fix-osx-firefox-mix-blend-mode-bug-6b3548e9e546

Paule_D的回答

Answer 4

尝试在Firefox中禁用硬件加速（选项＆gt;高级＆gt;可用OFF时使用硬件加速）

混合混合模式：Firefox中的Multiply Bug

4 个答案: