IE11中mix-blend-mode: multiply的替代实现方案咨询

首先得说，mix-blend-mode: multiply在IE11里确实完全不支持，这也是老浏览器的常见痛点。下面给你几个不用批量转PNG的可行方案，按优先级推荐：

方案1：用SVG的feColorMatrix滤镜（最可靠，支持IE11） #

SVG的颜色矩阵滤镜可以精准把白色区域转为透明，而且IE11对SVG滤镜的支持还不错。你可以把JPG图片嵌入到SVG里，然后用滤镜处理：

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="whiteToTransparent">
      <feColorMatrix
        type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 -1" />
    </filter>
  </defs>
  <image xlink:href="your-image.jpg" width="100%" height="100%" filter="url(#whiteToTransparent)" />
</svg>

原理是通过颜色矩阵的最后一行，把白色（RGB值均为1）的alpha通道设为0。如果你的图片白色不是纯#FFFFFF，还可以微调矩阵值来适配接近白色的浅灰区域。你可以把这个SVG当作普通图片直接用在HTML里，比如<img src="image-wrapper.svg" alt="..." />，或者把SVG代码内联到HTML中，避免额外请求。

方案2：IE专属的Chroma滤镜（仅适用于纯白色背景） #

如果你的图片背景是完全纯净的白色（#FFFFFF），可以用IE11支持的旧版CSS滤镜来去除白色：

.your-image {
  /* 保留现代浏览器的mix-blend-mode规则 */
  mix-blend-mode: multiply;
  /* IE11专属滤镜，仅对纯白色生效 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='#FFFFFF')";
}

这个方案的局限性很明显：只能处理完全匹配的白色，图片里的白色如果有任何灰度、色差或者渐变，就会失效。不过它胜在简单，且不会影响现代浏览器的正常显示。

方案3：批量转换PNG（终极备选，减少工作量） #

如果上面的方案都不适用，那批量转PNG其实也没那么耗时。用命令行工具可以快速处理几百张图片，比如ImageMagick的命令：

# 批量把当前目录下的所有JPG转成带透明白色的PNG
magick convert *.jpg -transparent white *.png

这个命令会自动识别每张JPG里的白色区域并转为透明通道，几分钟就能处理完几百张图，比手动逐个修改效率高太多。

内容的提问来源于stack exchange，提问作者TBJ