Can we have "Chroma key" technique using plain CSS or jQuery?

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 transpare开发者_Python百科nt 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.

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.

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/