Question

我想在我的网页上放置一个红色矩形<div>元素，这样它不仅可以看起来透明，而且还可以像在Photoshop的Multiply模式中混合一样。

<div>会有position: fixed，因此其下方的内容会很快发生变化。

这可能与任何HTML5 / CSS3 / canvas / SVG技巧有关吗？

Answer 1

我创建了一个单独的，轻量级的开源库，用于从一个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，包括当前支持的混合模式。

您可以使用它来执行从一个画布到另一个画布的乘法，但不能通过标准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或context-blender更具可读性。）

Answer 4

这不是HTML5，但它与我所能找到的一样接近。

Javascript blending modes（OpenGL）。

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

Answer 5

我也非常有兴趣这样做。我为视觉设计师编写的许多布局都可以使用它。除了这个帖子中的其他帖子之外，有一种方法可以做到这一点，目前仅在Firefox 4中，而不使用OpenGl或Canvas。它是通过使用SVG过滤器。很明显，这也是Webkit和Chrome的夜晚，但我看不到任何有效的东西。

以下是一些演示和解释：

恕我直言，任何接近混合模式的东西现在都难以实现。在feConvolveMatrix，feSpecularLighting或feColorMatrix上找到任何引用都非常困难，这些示例对我来说是不可能的。他们可以工作，但我不知道如何。

我希望像EffectGames suggested：

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元素中使用。