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

Question

我正在使用名为#search-container 的 div

我使用它的不透明度为 0.6。

所以它会有一些不透明

#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;  
                                }

现在我在 ID 为#city 的搜索容器下放置一个文本框

我正在为#city 使用 css

#city
                                   {

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

但是，文本框的不透明度仍然等于搜索容器

看起来 child 的不透明度与其居住的 parent 相同

我怎样才能让文本框看起来是实心的，我希望 div #search-container 是不透明的，但文本框应该是实心的..

有什么办法可以实现吗？？？

一些帮助将是可观的...在此先感谢...

Answer 1

CSS 元素的不透明度通过子元素向下乘，所以如果我在白色背景之上的 50% 不透明度黑色 div 中有一个 50% 不透明度的红色 div，我将能够透过红色看到一些黑色，整个事情都是白色的。

如果您只需要背景颜色不透明度，您可以使用 rgba() 作为背景来解决这个问题，但 IE6- 不支持它。背景图像/图像不透明度可以使用 PNG 或 SVG 图像来完成。如果您确实需要完整的元素不透明度，那么您还可以使用包装器 div 使半透明元素和不透明元素成为同级元素，并使用绝对定位(yuck)。