混合模式：在Internet Explorer中使用乘法混合模式

Question

我需要将一张图片与一个红色正方形以“multiply”模式混合在一起。据我所知，IE和Safari不支持css属性“blend-mode”，因此我尝试在画布中将它们混合在一起，除了IE之外，一切都运行良好。是否有任何方法可以在IE中混合它们，或者还不支持这种功能？

- Dominik Seemayr

Answer 1

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

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/mixblendmode/?q=blend

在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);
}

而且这个多重图像过滤器也支持跨浏览器使用。

- markE

---

我发现这个答案非常有用。除此之外，您还可以模仿乘法图层的不透明度。我发现这个公式与Photoshop的乘法图层和不透明度完全相同：(255-255 * opacity + R * opacity) * data [i] / 255，其中opacity是介于0和1之间的值（例如，0.75将是一个75％不透明的乘法图层）。显然，这需要应用于所有三个颜色通道。 - Joseph Marikle

Answer 2

我在这里找到了一个完全基于CSS的解决方案：

https://teamtreehouse.com/community/fallback-for-css-blending-modes

解决方法如下：

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

- Olivier Royo

---

不太有用，不透明度与混合模式并不相同。 - Rudi Ørnhøj

@RudiØrnhøj - 你是对的。它不是一样的。这是一个后备方案。而且它是纯CSS。点赞来了。 - leymannx

返回的是“true”，但目标是给图像加上红色边框，我认为这样做就可以了。 - Olivier Royo