调节CSS中子元素的不透明度

Question

i am using a div named #search-container

i am using its opacity as 0.6.

so that it wud have some opacity

#search-container
                               {
                                border-radius: 15px;
                                moz-border-radius: 15px;

                                position:absolute;
                                height:45%; 
                                width:55%; 
                                left: 3%;top:30%; 
                                background-color: #000; 
                                opacity:0.6;  
                                }

now i am placing a text box under the search container having id #city

i am using a css for #city

#city
                                   {

                                    height:20%; 
                                    width:40%; 
                                    opacity:1;  
                                    }

but still, the text box is having an opacity equal to the search-container

it seems the child is having same opacity as of its residing parent

how can i make the text box look solid, i want the div #search-container to be opaque, but the text box should be solid..

is there any way to achieve this???

some help will be appreciable... thanks in advance...

Answer 1

CSS element opacity is multiplied down through child elements so if I were to have a 50% opacity red div inside a 50% opacity black div on top of a white background, I would be able to see some black through the red and white through the whole thing.

If you only need background colour opacity, you can use rgba() as a background to get around this but it's not supported by IE6-. Background image/image opacity can be done using PNG or SVG images. If you absolutely need full element opacity then you can also use a wrapper div to make the semi-transparent element and the opaque element siblings and use absolute positioning ( yuck ).