Search code examples
htmlcssz-indexopacity

z-index and opacity issues


I'm trying to make a wrapper at the back off all of my DIV's that will appear transparent (opacity: 0.6), but everything in front of that is appearing transparent too.

Any ideas how to fix this?

You can find the example here: http://testing.squaretise.com/ (I have given the wrapper (#wrap) a red border so you can interpret easier)


Solution

  • Use instead of:

    opacity: 0.6;
    

    this:

    background: rgba(255, 255, 255, 0.6);
    

    The color is in RGB and the last digits are for the transparency level.