javascript 混合模式：在 Internet Explorer 中相乘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25158696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blend mode:multiply in Internet Explorer
提问by Dominik Seemayr
I need to have an Image blended together with an red square in mode multiply. As I know, IE and Safari doesn't support the css-property "blend-mode", so I tried it with blending them together in a canvas and everything worked fine - except in IE. Is there any way to get those blended together in IE or isn't that supported yet?
我需要在模式乘法中将图像与红色方块混合在一起。据我所知，IE 和 Safari 不支持 css 属性“混合模式”，所以我尝试将它们混合在画布中，一切正常 - 除了在 IE 中。有什么办法可以在 IE 中将它们混合在一起，或者尚不支持？
回答by markE
For Internet Explorer, Canvas blending modes are "under consideration".
对于 Internet Explorer，Canvas 混合模式正在“考虑中”。
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/mixblendmode/?q=blend
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/mixblendmode/?q=blend
Until blends are implemented in IE, you can roll-your-own multiply filter:
在 IE 中实现混合之前，您可以滚动自己的乘法过滤器：
function multiply(R, G, B) {
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imgData.data;
for (var i = 0; i < data.length; i += 4) {
data[i ] = R * data[i ] / 255;
data[i + 1] = G * data[i + 1] / 255;
data[i + 2] = B * data[i + 2] / 255;
}
ctx.putImageData(imgData, 0, 0);
}
And this multiply image filter is cross-browser compatible too.
而且这个多重图像过滤器也是跨浏览器兼容的。
回答by Olivier Royo
Here I found a fully css solution:
在这里我找到了一个完整的 css 解决方案：
https://teamtreehouse.com/community/fallback-for-css-blending-modes
https://teamtreehouse.com/community/fallback-for-css-blending-modes
which is:
即：
<!--[if IE]>
<style>
.yourTargetClass:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: rgba(10, 36, 54, 0.9); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */
}
</style>
