Images have become semi-transparent when using opacity property. Why?

[cssssc10]

The setup looks like this…
There’s a image background on the page and a div on top with a background set to a solid hex color and the opacity was set to allow just a subtle amount of the image background below it to show through.

Follow me so far?

So I put a few more divs inside of that one with content. However any images used in there (I’m talking jpgs here, no transparency to begin with) are semi-transparent and you can see the main img background of the page showing through the images used on top. I’ve tried applying the opacity (set to 1.0 for totally opaque) to both the individual images and the divs on top and nothing changed.

The stack order is fine so I’m stumped. What is going on here? The images look like crap as a result of this problem.

[Manojsethi]

the opacity property of css inherits the property of parent class. use rgba command as
rgba(0,0,0,0.5);
first 3 numbers are rgb code and last 4th is 0.5 is opacity.
hope it works for you

[cssssc10]

Thanks but where do I use that?
Replace the original opacity property or do I leave that and add this rgba command to the image or content divs?

[Manojsethi]

Replace the Opacity Property with

background-color:rgba(178,58,238,0.8);

[cssssc10]

Thanks! That did the trick.
Do you know if its ie8 compatible?

[Manojsethi]

no i am using Mozilla Firefox.

[Author]

Posts