Question

我一直在尝试在包含css不透明度转换实例的页面上使用混合混合模式。似乎正在发生的事情是包含混合混合模式的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

所以，我想我想出了问题。在动画期间，似乎身体不算作元素，从而使黄色显示为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;
}

我还改变了身体以填充窗口，因此边距也不是黄色。或者，可以根据身体的大小调整混合div的大小。

标记@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>

没有div css中的'background-image'。

Chrome中的混合混合模式问题

1 个答案: