【发布时间】：2015-08-01 07:19:43
【问题描述】：
是否可以创建与 Photoshop 中可用的颜色加深、颜色减淡、柔光等相同的透明效果？我知道 CSS3 中的“背景混合模式”，但它的支持是有限的。有什么方法可以在主要使用的浏览器上进行这项工作，包括 IE9？也许有一些类似于 CSS3pie 的 hack？
【问题讨论】：
标签： javascript css cross-browser frontend blending
【发布时间】：2015-08-01 07:19:43
【问题描述】：
你提到了background-blend-mode，你是对的——它是混合颜色的最佳方法之一，但是surprise, surprise, IE doesn't support it，即使在 Edge 中也是如此，这很令人痛心。这个fantastic article 列出了所有blend-mode 选项及其效果，包括您提到的color-burn 和color-dodge。
还有filter，支持by some browsers，但不支持Internet Explorer/Edge。
Polyfills 让我们更接近，但不是一路。
Github 上已经有一个Filter Polyfill 提供IE6-9 对filter 的支持（其他主流浏览器已经支持）。
blend-mode 的难度更大。有 are polyfills 可用，但它们通常不支持 IE，甚至不支持一种以上的 blend-mode。
这会给我们带来什么？如果即使是 polyfills 也无法拯救我们，那么是时候放弃支持不受支持的功能并简单地使用功能齐全的库的想法了，例如插件jquery.
对Blend-Mode 进行了一些研究，它似乎在 Internet Explorer 上运行良好，尽管它绝不是完美的。
还有Pixastic library，它具有许多其他功能，似乎在 IE9 上工作，但在 8 或以下版本上遇到了困难。
这是什么意思？
基本上 - 我知道这不是您想要的答案 - 但根据我的研究，目前不太可能找到真正支持 IE 的解决方案。不存在对 canvas blend-mode 的支持，而且这些垫片充其量也是有问题的。
您有一个选择 - 仅在支持现代的浏览器上使用这些技术，或者首先使用 Photoshop 式程序，然后将图像上传到您的网络服务器（并失去动态执行此操作的能力，这一切都是因为Internet Explorer）。
我希望我在这里的研究对你有所帮助。
【讨论】：