我想放一个红色的矩形<div>
在我的网页上添加元素,这样它看起来不仅透明,而且就像在 Photoshop 的正片叠底模式下混合一样。
<div>
会有 position: fixed
, 所以它下面的内容会很快改变。
是否可以使用任何 HTML5/CSS3/canvas/SVG 技巧?
最佳答案
我创建了一个单独的、轻量级的开源库,用于从一个 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/