How to get image transparency

[RyanInt]

I have a page body of <div> transparent. To be sure it works on all browsers, I got the transparency with

filter: alpha (opacity = 80); 
opacity: 0.80; 
-moz-opacity: 0.80;

Good so far it works. In the inside of these boxes I have a picture but it is also transparent. This is normal because it inherits properties. But how can that image is not transparent? I tried by creating a div just for the image

filter: alpha (opacity = 100); 
opacity: 1.00; 
-moz-opacity: 1.00;

But it is not working, new properties do not replace the previous. The only solution I found was out of the picture are container. Someone would have any idea? How can I make the images in the boxes on my website transparent?

[void]

What you want is to see the background in the blue blocks but not in the pictures, right? So this should work with the "Display" property. The display property specifies the type of box an element should generate. The display property is supported in all major browsers.

[RyanInt]

I did several tests not only with display but also with z-index but nothing changes. What I actually want is that the blue box (which contains the image) is transparent as well as the opaque image. To get a better idea, you can see simply your desktop wallpaper images that explains everything!

[!const]

Are you sure that you declare your properties in opacity on div 2 levels? If you make a div transparent, everything inside in it is transparent. For that: either you put a transparent background png, or you make 2 div and you fill it with z-index, and one that you want to make transparent.