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

Question

This one is not trivial. I want to create a chroma key menu. For those not familiar, it is the same in video with the green background (or whatever color) being removed and special background is added.

I have images as a background in a menu. What I want is to set in someway the section where the background is transparent and the rest being filled with a color. In the example below, the background of the menu is image. Can we have such a background without one?

I am interested in unified solutions, not ones using css3.

Answer 1

I'm happy to be proven wrong, but I'm fairly sure the answer is no, not even with CSS3. Maybe using IE's very advanced filter() s but those aren't cross-browser.

Using a transparent channel for the background is the only way to go. It won't be trivial, but you could use a server-side script to change a specific colour into the transparent colour.

ImageMagick should be able to do this. Here's a promising example.

However, these examples are for replacing one colour. Whether it's possible to make this look good for anti-aliased edges (where the "transparent" colour blends into the surface colour, creating a mixture that the program would have to detect), I don't know.

If at all possible, use proper transparency from the start.

Answer 2

I imagine this would be possible on the client-side by copying the image into a <canvas> rendering context, processing the image data (like ImageMagick does) then outputting a data uri which you can use as the CSS background-image of your menu.

For reference see:

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

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