Opacity feature for css - transparency inside div

Question

I am confused abut the working of html opacity feature... Assume there are two divs, one inside the other, and I apply opacity to the outer div, it will automatically apply opacity to inner div too. how can we undo that, like opacity should work only for outer div?

Ive used the css code opacity http://jsfiddle.net/4uMdj/

Answer 1

If your are using background-color in your outer DIV then you can define rgba value to it. Write like this:

.outer{
 background-color: rgba(0,0,0,0.5);
}

& for IE use IE filter

you can generate your rgba filter for IE from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

Answer 2

.parent{
    position: relative;
}

.parent:before {
    z-index: -1;
    content: '';
    position: absolute;

    opacity: 0.3;
    width: xxpx;
    height: xxpx;
    background: ; 
}

.child{
    Color:xx;
}