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

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

似乎孩子与其居住的父母具有相同的不透明度

如何让文本框看起来很稳固，我希望div＃search-container不透明，但文本框应该是实心的..

有没有办法实现这个???

一些帮助会很明显......提前谢谢......

Answer 1

CSS元素不透明度通过子元素向下相乘，所以如果我在白色背景上的50％不透明度黑色div内有50％不透明度红色div，我将能够通过红色看到一些黑色和贯穿整个事情。

如果您只需要背景颜色不透明度，则可以使用rgba()作为背景来解决此问题，但IE6不支持它。可以使用PNG或SVG图像完成背景图像/图像不透明度。如果你绝对需要完整元素不透明度，那么你也可以使用包装器div来制作半透明元素和不透明元素兄弟，并使用绝对定位（ yuck ）。

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

1 个答案: