Firefox混合混合模式错误 [英] Firefox mix-blend-mode bug

问题描述

我目前需要使用混合混合模式为一个项目乘以黄色div上的图像。它在chrome中工作没有任何问题，但在firefox中，当容器具有与图像相同的宽度和高度时，图像将变黑。

I currently need to use mix-blend-mode for a project to multiply a image on a yellow div. It's working in chrome without any problems but in firefox, the image will turn black when the container has the same width and height as the image.

如果图像高1px它会运行反正。任何人都知道为什么会发生这种情况？

If the image is 1px higher it will run anyway. Anyone know why that happens?

这里是我的代码示例。尝试它在firefox和玩高度值。

Here is my code example. Try it in firefox and play around with the height value. It's going to turn black when you set the height to 500px.

感谢任何帮助人！

.image {
  background: #ffff00;
  display: block;
  width: 500px;
  height: 505px;
}
.image img {
  mix-blend-mode: multiply;
}

<div class="image">
  <img src="http://unsplash.it/500/500">
</div>

>

推荐答案

我发现你需要在图像后面设置一个背景颜色，并且为Firefox正确渲染div。因此，如果您的图像只占用了混合混合模式集的div的一部分，则包含或位于其余div的背景div需要一个颜色集，以便计算起作用。在设置背景颜色之前，我看到部分黑色div。

I found that you need to set a background color behind the image and div for Firefox to render properly. So if your image takes up only part of the div that has mix-blend-mode set, the background div containing or behind the rest of the div needs a color set for the calculation to work. I was seeing partial black divs before setting the background color.

这么说，你的例子似乎在Firefox 41中工作。

All that said, your example seems to be working in Firefox 41 as is now.

这篇关于Firefox混合混合模式错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！