Question

我正在修改混合混合模式属性以在图像上应用滤色器，但混合混合模式乘法在Chrome和FF中的运行方式似乎不同。

.filter {
  position: relative;
}
.filter::before,
.filter::after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: block;
  z-index: 1;
}
.filter--rise {
  -webkit-filter: brightness(1.2) contrast(0.9) saturate(90%);
  filter: brightness(1.2) contrast(0.9) saturate(90%);
}
.filter--rise::before {
  background: -webkit-radial-gradient(circle, rgba(236, 205, 169, 0.2) 55%, #321E07 100%);
  background: radial-gradient(circle, rgba(236, 205, 169, 0.2) 55%, #321E07 100%);
  mix-blend-mode: multiply;
  opacity: 0.8;
}
.filter--rise::after {
  background: -webkit-radial-gradient(circle, rgba(246, 189, 57, 0.6), transparent 100%);
  background: radial-gradient(circle, rgba(246, 189, 57, 0.6), transparent 100%);
  mix-blend-mode: overlay;
  opacity: 0.6;
}

<figure class="filter filter--rise">
  <img src="http://i.imgur.com/KQ0U5BL.jpg" alt="">
  <figcaption>Rise</figcaption>
</figure>

这是结果（左边是铬，右边是FF - 预期的结果是FF）。

http://i.imgur.com/ySPTbFN.png

有人可以向我解释为什么会这样吗？（以及为什么只有这种模式，因为其他模式，例如硬光，叠加等工作方式相同）

Answer 1

这是an issue in Chrome 46 on Windows。看起来已经修复了47。

混合混合模式乘法在FF和Chrome中的工作方式不同

1 个答案: