overlay image with single rgb transparent color in html5/css

Question

I would like to read a picture (gif color image) with a fixed background rgb color, say (0,0,0), into my html5 program, and overlay it on another image, with only that background color transparent. Note this background is not a fixed shape -- it is, for instance, the sky with a foreground bird flying across it. I just want to see the bird. I tried the following,

<div style="z-index: 100; position: absolute; top: 39px; left: 72pix; background-color: #ffffff; opacity: 0.5">

<img alt="overlay image" src="overlay.gif" WIDTH=32 HEIGHT=32></div></div>

but this makes the whole overlay 0.5 transparent. I tried inserting this,

<div style="background: rgba(0,0,0,0.0)"></div>

but this doesn't change the image rgb values, only sets the actual background around the image.

Answer 1

You wouldn't be able to do this using CSS/HTML only. It will require SVG or JavaScript. Answer to similar question is here .