我们可以使用普通的CSS或jQuery进行“色度键”技术吗？

Question

这一点并非无足轻重。我想创建一个色度键菜单。对于那些不熟悉的人来说，视频中的绿色背景（或任何颜色）被删除并添加了特殊背景。

我将图像作为菜单中的背景。我想要的是在某处设置背景透明的部分，其余部分用颜色填充。在下面的示例中，菜单的背景是图像。我们可以没有这样的背景吗？

我对统一解决方案感兴趣，而不是使用css3的解决方案。

Answer 1

我很高兴被证明是错的，但我很确定答案是否定的，即使是CSS3。 也许使用IE非常先进的filter()，但这些不是跨浏览器。

使用透明通道作为背景是唯一的方法。它不会是微不足道的，但您可以使用服务器端脚本将特定颜色更改为透明颜色。

ImageMagick应该能够做到这一点。 Here's一个很有希望的例子。

但是，这些示例用于替换一种颜色。是否有可能使这种看起来很好的抗锯齿边缘（“透明”颜色混合到表面颜色，创建程序必须检测的混合物），我不知道。

如果可以所有，请从一开始就使用适当的透明度。

Answer 2

我想通过将图像复制到<canvas>渲染上下文，处理图像数据（如ImageMagick）然后输出可用作CSS背景的数据uri，可以在客户端实现这一点。 - 你的菜单的图像。

供参考：

http://www.hmp.is.it/creating-chroma-key-effect-html5-canvas/

http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/