我们可以使用纯CSS或jQuery的“色度键”技术吗？

Question

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

我有图片作为菜单的背景。我想要的是在某种程度上设置背景透明的部分，其余部分填充颜色。在下面的例子中，菜单的背景是图像。我们能有没有这样的背景吗？

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

Answer 1

我很高兴被证明是错误的，但我相当肯定答案是否定的，甚至没有CSS3。 也许使用IE的非常先进filter() s，但那些不是跨浏览器。

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

ImageMagick应该可以做到这一点。 Here's是一个很好的例子。

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

如果在全部可能，从一开始就使用正确的透明度。

Answer 2

我想通过将图像复制到<canvas>渲染上下文中，处理图像数据（像ImageMagick那样），然后输出数据uri，您可以将其用作CSS背景图像你的菜单。

更多信息参见：

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

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