css - HTML5中是否可以实现类似photoshop的混合模式？

我想在网页上放置一个红色的矩形<div>元素，以使其不仅看起来透明，而且还像在Photoshop的“倍增”模式下混合一样。
<div>将具有position: fixed，因此其下面的内容将快速更改。

HTML5 / CSS3 / canvas / SVG技巧有可能吗？

最佳答案

我创建了一个单独的轻量级开源库，用于执行从一个HTML Canvas上下文到另一个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元素上执行。

关于css - HTML5中是否可以实现类似photoshop的混合模式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4276859/