当前位置：文江博客话题详情

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

发布于 2024-10-04 13:16:12 字数 249 浏览 9 评论 0原文

我想在我的网页上放置一个红色矩形

元素，这样它不仅看起来是透明的，而且就像在 Photoshop 的乘法模式中混合的一样。

将具有 position:fixed，因此其下方的内容会快速更改。

任何 HTML5 / CSS3 / canvas / SVG 技巧都可以实现吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

洛阳烟雨空心柳 2024-10-11 13:16:12

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

请参阅 README 了解更多信息，包括当前支持的混合模式。

您可以使用它来执行从一个画布到另一个画布的乘法，但不能在标准 HTML 元素上执行。

I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:

// Might be an 'offscreen' canvas
var over  = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');

over.blendOnto( under, 'screen', {destX:30,destY:15} );

See the README for more information, including the currently-supported blend modes.

You could use this to perform multiply from one canvas to another, but not over standard HTML elements.

回复收藏 0 原文

白馒头 2024-10-11 13:16:12

不（不是原生的），但很快就会推出：http://blogs .adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/

回复收藏 0 原文

╰ゝ天使的微笑 2024-10-11 13:16:12

您还可以查看此演示：http://media.chikuyonok.ru/canvas-blending/ 了解如何用画布来做到这一点。

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

回复收藏 0 原文

哑 2024-10-11 13:16:12

这不是 HTML5，但它是我能找到的最接近您所要求的内容的。

Javascript 混合模式 (OpenGL)。

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

回复收藏 0 原文

几度春秋 2024-10-11 13:16:12

我也对此非常感兴趣。我为视觉设计师编写的许多布局都可以使用它。除了本线程中的其他帖子之外，还有一种方法可以做到这一点，目前仅在 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 元素中使用。

I am also very interested in doing that. Many layouts that I coded for visual designers could have used that. Aside from the other posts in this thread, there is a way to do this, currently only in Firefox 4, without using OpenGl or Canvas. It's trough the use of SVG filters. Aparrently it's on nighties from Webkit and Chrome also, but I couldn't see anything working yet.

Here are some demos and explanations:

IMHO something anyware close to blend modes are too much hard to achieve right now. It's very hard to find any references on feConvolveMatrix, feSpecularLighting, or feColorMatrix, and the examples are just impossible to figure out for me. They could work but I don't know how.

I wish something like EffectGames suggested:

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

This would be a way better approach. Maybe some ninja there skiled in mathematics could make us a lib to do that.

EDIT: There is an easier SVG spec to do exactly blend modes. But no browser that I tested have this working (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - But I also don't know if this will be possible to use in HTML-DOM elements.

回复收藏 0 原文