css怎么设置背景半透明文字不透明

Question

<header id="header">
    <div class="container">
        <div class="logo"></div>
        <nav class="menu">
            <ul>
                <li><a>菜单</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS部分

#header{
    height:60px;
    background:#fff;
    background:rgba(255, 255, 255, 0.5) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/
    opacity:0.5;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    width:100%;
    line-height:60px;
    position:absolute;
    z-index:99;
}
#header .logo{
    background-image:url(img/logo.png);
    background-size:cover;
    width:40px;
    height:40px;
    float:left;
    margin:10px 0;
    position:relative;
}

nav.menu{
    width:100%;
}

nav.menu ul{
    float:left;
    margin-left:15px;
}

nav.menu ul li{
    display:inline-block;
}

nav.menu ul li a{
    display:block;
    line-height:60px;
    padding:0 20px;
    color:#000;
    position:relative;
}

怎么使得header的背景半透明而文字和图片不透明呢，我找到的资料是把父元素设置成半透明，子元素的position设置成relative，按照网上的一些方法设置后文字和图片还是会和背景一样半透明，求解。

Answer 1

你 header部分又没有背景图片 ，rgba就含有透明效果了，但是低版本IE不兼容
不要加

opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;

就可以了，如果你要全兼容的话做个和header一样大的box定位于header之下，再加上上面三句就可以了

Answer 2

父元素透明，子元素不透明，演示地址：http://www.jscssshare.com/#/sample/AlByS1St