我們可以使用純CSS或jQuery的「色度鍵」技術嗎？

這個不是微不足道的。我想創建一個色度鍵菜單。對於那些不熟悉的人來說，視頻中的綠色背景（或任何顏色）被刪除，並添加特殊背景是一樣的。我們可以使用純CSS或jQuery的「色度鍵」技術嗎？

enter image description here

我有圖片作爲菜單的背景。我想要的是在某種程度上設置背景透明的部分，其餘部分填充顏色。在下面的例子中，菜單的背景是圖像。我們能有沒有這樣的背景嗎？

我對統一解決方案感興趣，而不是使用css3。

2011-09-26 Odys

如果你可以使用JavaScript/jQuery的，你真的應該標記你的問題是這樣的。 – thirtydot

我真的不明白你想要達到什麼目的，但是你不能僅僅使用帶alpha透明度的PNG嗎？這就是我將如何實現你上面發佈的內容;但就像我說的，我不確定我是否完全滿足要求！ – Xophmeister

補充：我認爲，如果可能的話，在視頻世界中進行色度鍵控和複合效果將非常困難（而且非常慢）。 – Xophmeister

我很高興被證明是錯誤的，但我相當肯定答案是否定的，甚至沒有CSS3。也許使用IE的非常先進filter() s，但那些不是跨瀏覽器。

將透明通道用於背景是唯一的方法。這不是微不足道的，但您可以使用服務器端腳本將特定顏色更改爲透明顏色。

ImageMagick應該可以做到這一點。 Here's是一個很好的例子。

但是，這些示例是用於替換一個的顏色。我不知道，是否有可能使這種方法適合抗鋸齒邊緣（「透明」顏色融入表面顏色，創建程序必須檢測的混合物），我不知道。

如果在全部可能，從一開始就使用正確的透明度。

2011-09-26 08:34:33

我意識到圖像魔法。非常感謝你的迴應。在附近的功能，我可能會實現一個wordpress插件來完成這項工作。我希望有人已經這樣做了！ – Odys

我想通過將圖像複製到<canvas>渲染上下文中，處理圖像數據（像ImageMagick那樣），然後輸出數據uri，您可以將其用作CSS背景圖像你的菜單。

2014-08-07 05:35:17 corse32

回答