css - Chrome 中的混合混合模式问题

Question

我一直在尝试在包含 css 不透明度过渡实例的页面上使用 mix-blend-mode。似乎正在发生的事情是，包含混合混合模式的 div 在过渡期间显示为没有混合模式，或者更确切地说，当动画正在进行时。我只发现它是 Chrome 中的一个问题。

在我的示例中，当 div 正在转换时，混合模式会在图像上正确显示，但不会在页面背景上正确显示。转换完成后，它会返回到应有的显示状态。换句话说，混合 div 在动画进行时在黑色背景上显示为纯黄色，但由于它设置为变暗，因此在黑色背景上应该是不可见的。动画完成后，它会按预期显示。它在图像上看起来很正常。

我试过这是 Firefox 和 Safari，似乎没有问题。

笔:http://codepen.io/anon/pen/QGGVOX

编辑 - 我发现了另一个不涉及任何动画的实例。奇怪的是，当一个 div 的位置设置为固定而另一个是绝对位置时，会发生这种情况，请参见此处:http://codepen.io/anon/pen/wooRME如果 div .image 的位置更改为绝对位置，则混合模式显示为正常。

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;
}

Answer 1

所以，我想我找到了问题所在。在动画过程中， body 似乎不算作一个元素，因此黄色显示为 1 不透明度。我用其他混合模式进行了测试，它总是显示为黄色。 (当设置为“差异时，预期结果将是白色而不是黄色)

所以修复？只需添加一个 100% 尺寸和黑色背景的 div!然后，黄色有一些东西可以混合并且不会出现。

这是在您的笔中运行的代码:

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 可以根据主体的功能调整大小。

标记@chrscblls 因为他们想知道你是否找到了什么。

---

编辑:

对于其他代码笔，问题并不相同。他们试图将图像和黄色矩形变暗到灰色背景上。

如果他们不想在灰色背景上显示黄色，解决方案就是将图像放在 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>

在 div CSS 中没有“背景图像”。