8

我一直在尝试在包含 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;
}
4

1 回答 1

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 中的“背景图像”。

于 2017-03-25T23:30:52.123 回答