35

I want to put a red rectangular <div> element over my webpage so that it would look not only transparent, but also like blended in Photoshop’s Multiply mode.

The <div> would have position: fixed, so the content below it would change quickly.

Is that possible with any HTML5 / CSS3 / canvas / SVG trick?

4

10 回答 10

27

我创建了一个单独的、轻量级的开源库，用于从一个 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 元素。

于 2010-12-03T22:53:56.240 回答
12

不（不是本地），但它即将推出：http: //blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

于 2012-04-16T03:21:03.363 回答
7

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

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

于 2011-09-15T21:08:45.320 回答
2

这不是 HTML5，但它与您所要求的内容一样接近。

Javascript 混合模式(OpenGL)。

我不认为像 Photoshop 这样的“混合模式”可以仅用纯 HTML 来模拟，除非该语言在另一个方向发生了急剧转变。但是很高兴看到一些更简单的方法来做到这一点。

于 2010-11-25T12:54:52.093 回答
2

我也对这样做很感兴趣。我为视觉设计师编写的许多布局都可以使用它。除了这个线程中的其他帖子之外，还有一种方法可以做到这一点，目前仅在 Firefox 4 中，无需使用 OpenGL 或 Canvas。这是通过使用 SVG 过滤器。显然，它也在 Webkit 和 Chrome 的睡衣上，但我还看不到任何工作。

以下是一些演示和解释：

恕我直言，任何接近混合模式的东西现在都很难实现。很难在 、 或 上找到任何参考资料feConvolveMatrix，feSpecularLighting而且feColorMatrix这些示例对我来说简直是无法理解。他们可以工作，但我不知道如何。

我希望像EffectGames 这样的建议：

div.sprite {
   position: absolute;
   z-index: 2;
   composite: add;
}

这将是一种更好的方法。也许那里有一些精通数学的忍者可以使我们成为这样做的自由。

编辑：有一个更简单的 SVG 规范可以完全混合模式。但是我测试过的浏览器都没有这个功能（FF4、IE9、Opera11、Webkit Nightly）：http ://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - 但我也不知道是否这将可以在 HTML-DOM 元素中使用。

于 2011-04-28T06:42:31.013 回答
1

它已登陆 Chrome Canary，因此应该很快就会发布。http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/

于 2013-06-05T10:11:58.910 回答
1

这是我见过的最接近的，是的，所有资产都必须在画布中。请注意，Internet Explorer 在尚未发布的版本 9 中开始支持画布，因此如果您必须支持 IE<9，则必须使用解决方法。

于 2011-01-20T15:51:53.563 回答
1

您已经可以通过简单的 CSS（没有 Canvas）来使用它。例子：

mix-blend-mode: 'multiply'

Internet Explorer 可能不支持它，但其他浏览器支持。

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

于 2015-08-04T20:05:36.000 回答
0

根据所涉及的图像和您所追求的确切效果，您也许可以对图像和 CSS 渐变进行一些创造性的分层以实现所需的效果：

http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/

于 2012-04-23T21:48:05.967 回答
0

我已经使用http://canvasquery.com/中的画布实现了 gimp/photoshop 已知的最流行的混合模式，但是它不适合 relatime。

这将随着画布中原生混合模式的引入而改变

https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable

于 2013-01-26T21:11:50.830 回答