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

我想在网页上放一个红色的长方形的<div>元素，这样看起来不仅透明，而且像Photoshop的Multiply模式一样。

<div> position: fixed ，所以下面的内容会很快改变。

这是可能的任何HTML5 / CSS3 /帆布/ SVG技巧？

Answer 1

我已经创build了一个单独的，轻量级的开源库，用于从一个HTML Canvas上下文执行Photoshop风格的混合模式： 上下文混合器 。 以下是示例用法：

 // Might be an 'offscreen' canvas var over = someCanvas.getContext('2d'); var under = anotherCanvas.getContext('2d'); over.blendOnto( under, 'screen', {destX:30,destY:15} ); 

有关更多信息，请参阅自述文件 ，其中包括当前支持的混合模式。

您可以使用它来从一个canvas到另一个画面进行复用，但不能超过标准的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或上下文混合器更可读）。

Answer 4

这不是HTML5，但它可以find你所要求的内容。

Javascript混合模式 （OpenGL）。

我不认为像Photoshop这样的“混合模式”可以用纯粹的HTML来模拟，除非语言在另一个方向上急转弯。 但是，看到一些更简单的方法可以很好。

Answer 5

我也很有兴趣这样做。 我为视觉devise师编写的许多布局都可以使用它。 除了这个线程中的其他post，还有一种方法可以做到这一点，目前只在Firefox 4中，而不使用OpenGl或Canvas。 这是通过使用SVGfilter。 奇怪的是它也是来自Webkit和Chrome的睡衣，但是我看不到任何工作。

这里有一些演示和解释：

• （演示） http://people.mozilla.org/~roc/filter.xhtml
• https://developer.mozilla.org/en/applying_svg_effects_to_html_content
• https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
• http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html

恕我直言，任何接近混合模式的软件现在都难以实现。 在feConvolveMatrix ， feSpecularLighting或feColorMatrix上很难find任何参考，这些例子根本不可能find。 他们可以工作，但我不知道如何。

我希望像EffectGamesbuild议 ：

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

这将是一个更好的方法。 也许有些忍者在math上可能会让我们成为一个自由的人。

编辑：有一个更简单的SVG规范来完成混合模式。 但没有我testing过的浏览器有这个工作（FF4，IE9，Opera11，Webkit Nightly）： http : //dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html – 但我也不知道如果这将有可能在HTML-DOM元素中使用。

Answer 6

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

Answer 7

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

Answer 8

根据所涉及的图像和确切的效果，您可能可以对图像和CSS渐变进行一些创意分层，以获得所需的效果：

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

Answer 9

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

这将随着在canvas中引入本地混合模式而改变

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

Answer 10

你已经可以使用它只是简单的CSS（没有canvas）。 例：

 mix-blend-mode: 'multiply' 

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

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