HTML5中是否可以使用类似Photoshop的混合模式？

Question

我想<div>在我的网页上放一个红色的矩形元素,这样它不仅看起来很透明,而且就像在Photoshop的Multiply模式下混合一样.

该<div>会拥有position: fixed,所以它下面的内容会迅速改变.

这可能与任何HTML5/CSS3/canvas/SVG技巧有关吗？

Answer 1

我创建了一个单独的,轻量级的开源库,用于从一个HTML Canvas上下文到另一个上下文混合器执行Photoshop样式的混合模式:context-blender.以下是示例用法:

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

有关详细信息,请参阅自述文件,包括当前支持的混合模式.

您可以使用它来执行从一个画布到另一个画布的乘法,但不能使用标准HTML元素.

Answer 2

不(不是本地的)但它即将推出:http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

Answer 3

您还可以查看此演示:http://media.chikuyonok.ru/canvas-blending/,了解如何使用canvas进行此操作.

检查混合模式公式的来源以及如何应用它们(公式比pixastic或context-blender更具可读性).