在Chrome中混合混合模式的问题

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

在我的示例中，虽然div正在将混合模式显示正确地转换为图像，但不会覆盖页面背景。一旦转换完成，它就会返回到显示状态。换句话说，当动画正在进行时，混合的div在黑色背景上显示为纯黄色，但由于它被设置为变暗，因此它应该在黑色背景下隐藏。一旦动画完成，它应该会出现。它在图像上看起来很正常。

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

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

编辑 - 我发现了另一个实例，其中发生这种情况，不涉及任何动画。奇怪的是，当一个div的位置设置为固定而另一个是绝对位置时，会发生这种情况，请参阅：如果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; 
}

来源

2016-11-17 Henry

我有完全相同的问题，并失去了我的想法。如果您在过去的一个月内找到了解决方法，请发帖！ – chrscblls

所以，我想我想出了这个问题。在动画过程中，身体似乎不算作一个元素，因此使得黄色出现在1个不透明的位置。我使用其他混合模式进行测试，并且它总是呈现黄色。（当设置为'差异预期的结果将是白色而不是黄色的）

那么修复？只需添加一个100％大小和黑色背景的div！然后，黄色有东西可以混合，并没有出现。

下面是在你的笔工作的代码：

HTML - 增加了BG格：

<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-25 23:30:52 Salix

在Chrome中混合混合模式的问题

回答

相关问题