Chrome中的混合模式问题

Question

我一直在尝试在一个包含CSS不透明度转换实例的页面上使用mix-blend-mode。看起来正在发生的是，在转换期间，包含混合模式的DIV显示为没有混合模式的状态。我只发现在Chrome中存在这个问题。

在我的示例中，当div正在变形时，混合模式在图像上正确显示，但不在页面背景上显示。一旦转换完成，它会恢复正常显示。换句话说，混合的div在黑色背景上在动画进行中显示为纯黄色，但由于它被设置为变暗，所以应该在黑色背景上是不可见的。一旦动画完成，它就会呈现出应有的样子。在图像上它看起来很正常。

我已经在Firefox和Safari中尝试过了，似乎没有问题。

笔: http://codepen.io/anon/pen/QGGVOX 编辑 - 我发现另一个出现这种情况的实例，它与任何动画无关。奇怪的是，当一个div的位置设为fixed而另一个div的位置设为absolute时，它会发生，参见这里：http://codepen.io/anon/pen/wooRME 如果div .image的位置改为absolute，则混合模式看起来正常。

body {
background: #000;
}

.blend {
  height: 650px;
  width: 50%;
  background-color: yellow;
  mix-blend-mode: darken;
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0px;
  z-index: 100;
}

img {
  position: relative;
  z-index: 0;
}

- Henry

---

我遇到了完全相同的问题，已经为此烦恼了好一阵子。如果你在过去一个月中找到了任何解决方法，请务必发布！ - chrscblls

Answer 1

所以，我认为我找到了问题所在。在动画期间，身体似乎不算作一个元素，因此黄色出现时透明度为1。我尝试了其他混合模式，它总是呈现为黄色。（当设置为“差异”时，预期结果应该是白色而不是黄色）。

那么解决方法呢？只需添加一个具有100％大小和黑色背景的div！然后，黄色就有了可以混合的东西，不会显示出来。

以下是在您的pen中有效的代码：

html-添加了bg div：

<div class="bg"></div>
<div class="blend"></div>
<img src="http://lorempixel.com/500/500/">

这是 CSS：

.bg{
  background: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;
}

我还将body更改为填充整个窗口，这样边距也不会是黄色的。或者，混合div可以根据body的大小进行调整。

标记@chrscblls，因为他们想知道你是否发现了什么。

---

编辑:

对于另一个 CodePen，问题并不相同。他们试图在灰色背景上加深图像和黄色矩形。

如果他们不想让黄色显示在灰色背景上，解决方案很简单，只需将图像放入 div 中，并使用 ::after 混合颜色。甚至只需创建一个空 div，将其作为背景设置为图像，并使用 ::after。

如下所示：

<div/>

使用：

body {
  background: #333;
}

div{
  position:fixed;
  width: 500px;
  height: 500px;
  top:50px;
  left: 50px;
  mix-blend-mode: darken;
  background-image: url("http://lorempixel.com/500/500/");
}
div::after {
  content: "";
  height: 100%;
  width: 100%;
  background-color: yellow;
  mix-blend-mode: darken;
  position:absolute;
  opacity: 1;
  left: 0;
  top: 0;
}

或者这个：

<div><img src="http://lorempixel.com/500/500/"></div>

中的CSS没有“background-image”。

- Salix