Javascript 混合模式：在Internet Explorer中倍增

我需要有一个图像混合在一起与一个红方块在模式倍增。 正如我所知，IE和Safari不支持css属性“混合模式”，所以我尝试在画布中将它们混合在一起，一切都很好——除了IE。

---

有没有办法在IE中将这些混合在一起，或者还不支持这些方法？

对于Internet Explorer，画布混合模式“正在考虑中”

在IE中实现混合之前，您可以使用自己的乘法过滤器：

函数乘法（R，G，B）{
var imgData=ctx.getImageData（0，0，canvas.width，canvas.height）；
var数据=imgData.data；
对于（变量i=0；i

---

这个多重图像过滤器也是跨浏览器兼容的。

这里我找到了一个完全css解决方案：

即：

<!--[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>

---

不有用，不透明度与multiply@RudiØrnhøj–你是对的。不一样。这是一种退路。这是纯CSS。是的，但目标是在图像上加一个红色边框，我认为这样做很有效。我发现这个答案非常有用。要添加到这一点，还可以模拟乘以层的不透明度。我发现这一层与Photoshop的不透明度乘法层完全相同：
（255-255*不透明度+R*不透明度）*data[I]/255
，其中
opacity
是介于
0
和
1
之间的值（例如，
0.75
将是75%的不透明乘法层）。显然，这需要应用于所有三个颜色通道。