小编Hen*_*nry的帖子

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

在我的示例中,div正在将混合模式显示正确地转换为图像而不是页面背景.转换完成后,它会返回到应该显示的状态.换句话说,混合的div在黑色背景上显示为纯黄色,而动画正在进行中,但由于它设置为变暗,因此它应该在黑色背景上不可见.动画完成后,它应该显示出来.它在图像上显得正常.

我试过这是Firefox和Safari,似乎没有问题.

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

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

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