css - 在 HTML5 中可以使用类似于 photoshop 的混合模式吗？

Question

我想放一个红色的矩形<div>在我的网页上添加元素，这样它看起来不仅透明，而且就像在 Photoshop 的正片叠底模式下混合一样。

<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} );

参见 README获取更多信息，包括当前支持的混合模式。

您可以使用它来执行从一个 Canvas 到另一个 Canvas 的乘法运算，但不能在标准 HTML 元素上执行。