javascript - Can we have "Chroma key" technique using plain CSS or jQuery? - Stack Overflow

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.

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.

• javascript
• jquery
• css

Share Improve this question Follow edited Sep 26, 2011 at 8:27 thirtydot 228k5050 gold badges392392 silver badges354354 bronze badges asked Sep 26, 2011 at 6:43 OdysOdys 9,1101111 gold badges7575 silver badges116116 bronze badges 3

• If you can use JavaScript/jQuery, you really should have tagged your question as such. – thirtydot Commented Sep 26, 2011 at 8:27
• 1 I don't really understand what you're trying to achieve, but couldn't you just use PNGs with alpha-transparency? That's how I would implement what you have posted above; but like I say, I'm not sure if I fully grok the requirements! – Xophmeister Commented Sep 26, 2011 at 8:39
• To add: I think it, if it's possible, it would be very difficult (and very slow) to do chroma keying and posite effects a la the video world. – Xophmeister Commented Sep 26, 2011 at 8:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./advanced/html5-canvas-get-image-data-url/