Firefox混合混合模式错误

本文介绍了Firefox混合混合模式错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我目前需要使用混合混合模式为一个项目乘以黄色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="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.