javascript - 网页设计中的颜色燃烧混合模式

Question

是否可以创建与 Photoshop 中可用的颜色加深、颜色减淡、柔光等相同的透明效果？我知道 CSS3 中的“背景混合模式”，但它的支持是有限的。有什么方法可以在主要使用的浏览器(包括 IE9)上进行这项工作吗？也许有一些类似于 CSS3pie 的技巧？

Answer 1

您提到了 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 让我们更接近，但不是所有的方式。

已经有一个Filter Polyfill在 Github 上提供了 IE6-9 对 filter 的支持(其他主流浏览器已经支持)。

混合模式会更难。那里are polyfills 可用，但它们通常不支持 IE，甚至不支持一种以上的 blend-mode。

那留给我们的是什么？如果连 polyfill 都不能拯救我们，那么是时候放弃支持不受支持的功能并简单地使用功能齐全的库的想法了，比如一个插件jquery.

出现了一些研究 Blend-Mode ，它似乎在 Internet Explorer 上运行良好，尽管它绝不是完美的。

还有 Pixastic library它有许多其他功能，并且似乎在 IE9 上工作，但在 8 或更低版本上挣扎。

这是什么意思？

基本上 - 我知道这不是您想要的答案 - 但根据我的研究，目前不太可能找到真正支持 IE 的解决方案。对 canvas blend-mode 的支持是不存在的，这些垫片充其量是有问题的。

你有一个选择——只在现代的、支持的浏览器上使用这些技术，或者先使用一个类似 Photoshop 的程序，然后将图像上传到你的网络服务器(并且失去即时执行的能力，都是因为Internet Explorer)。

希望我的研究对您有所帮助。