Grow your CSS skills. Land your dream job.

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

  • # December 31, 2011 at 9:45 am

    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.

    # December 31, 2011 at 10:37 am

    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

    # December 31, 2011 at 11:26 am

    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?

    # December 31, 2011 at 11:42 am

    Replace the Opacity Property with

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

    # December 31, 2011 at 12:48 pm

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

    # December 31, 2011 at 2:10 pm

    Use
    filter:progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
    for IE where FFFFFF would be the color and 4C the transparent value (Google!!)

    # December 31, 2011 at 3:24 pm

    no i am using Mozilla Firefox.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".