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

Color-burn blend modes in webdesign

是否可以创建与 Photoshop 中可用的颜色加深、颜色减淡、柔光等相同的透明效果?我知道 CSS3 中的 'background-blend-mode',但它的支持是有限的。有什么方法可以在主要使用的浏览器(包括 IE9)上进行这项工作吗?也许有一些类似于 CSS3pie?

的技巧

您提到了 background-blend-mode,您是对的 - 这是混合颜色的最佳方法之一,但是 surprise, surprise, IE doesn't support it, even in Edge, which is saddening. This fantastic article 列出了所有 blend-mode 选项及其效果,包括正如你提到的 color-burncolor-dodge

还有 filter,支持 by some browsers 但不支持 Internet Explorer/Edge。

Polyfills 让我们更接近,但不是所有的方式。

Github 上已经有 Filter Polyfillfilter 提供 IE6-9 支持(其他主流浏览器已经支持)。

blend-mode 更艰难。有 are 个可用的 polyfill,但它们通常不支持 IE,甚至不支持一种类型 blend-mode

我们还能去哪里? 如果连 polyfill 都救不了我们,那么是时候放弃支持不支持的功能并简单地使用功能齐全的库的想法了,例如 jquery.

的插件

进行了一些研究 Blend-Mode,它似乎在 Internet Explorer 上运行良好,但绝不是完美的。

还有 Pixastic library,它具有许多其他功能,并且似乎在 IE9 上工作,但在 8 或更低版本上却很吃力。

什么意思?

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

您可以选择 - 仅在现代的支持浏览器上使用这些技术,或者先使用类似 Photoshop 的程序,然后将图像上传到您的网络服务器(并且失去即时执行此操作的能力,所有因为 Internet Explorer)。

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