how to make transparent layer over an image ??

[PHPycho]

Hello forums !!
I had an image which is kept @ the background of a table.
I want to make a layer over that image ie transpaernt layer .
How to make that transparent layer using css ?
Any idea?
Awaiting for you help.

[boogyman]

i dont really see the purpose, but maybe you are not divulging everything so all you need to do is create a new tag be it <div> or a <p> or a <span> depending on what you really need it for, then you can just use some absolute positioning and viola you have a layer over whatever you want.

[Trinithis]

To add to what boogyman said, I probably would have the transparent layer and the image within their own block level tag (div woud be fine) so that absolute positioning would set them neatly on top of each other

<div>
<img src="test.bmp" alt="" style="position:absolute;" />
<div style="position:absolute;width:Xpx;height:Ypx;background-color:#000000;filter:alpha(opacity=0);opacity:0;-moz-opacity:0;"></div>
</div>

Where I have Xpx and Ypx, change those values to the dimension of your image.

The reason I set background-color to black and the opacity stuff to 100&#37; clear is because I'm assumming you want this transparent layer so people can't save the image? This prevents it (to an extent).

You could also try using background-image as well if your intent is different.

[djr33]

That only makes it so that people cannot right click on the image and save it. Anyone who wants to steal your image will know of other ways, from the source code, to the cache, to print screen.

I think more information on the purpose would be helpful. I'm still not quite sure what you mean. I'd assume you mean translucent (semi-transparent), not completely clear, since that seems like a waste. However, you might need an image you cannot see but use for function, such as using an image map on it. That might work.

Again, give us a little more information on why you need this and we'll see if there's another creative solution.


The easiest way to have a transparent image is to use a gif. A png works too, but has little support in IE before IE7. There are ways around this if needed.