Html 不透明度应用于所有内部元素

我试图只在导航

背景
上设置
不透明度
，但它适用于所有内部
分区
，如徽标和导航，但我不想将
不透明度
应用于徽标
背景

我怎样才能做到这一点？
我使用的代码如下：

<div class="outer">YO<div class="inner">Zippazip</div></div>    

.outer {
    opacity: 0.5;
    background-color: red;
}

.inner {
    opacity: 1;
    background-color: blue;
}

HTML

<div class="navigation">
    <div class="logo"> logo image here  </div>
    <nav> navigation code here </nav>
</div>


标志图片在这里
导航代码在这里
如果设置元素的不透明度，它将应用于它包含的所有元素。您也可以给它们一个不透明度，但它将在0和父对象的不透明度之间相对，如您在此处所见：

换句话说，这样做是不可能的：

<div class="outer">YO<div class="inner">Zippazip</div></div>    

.outer {
    opacity: 0.5;
    background-color: red;
}

.inner {
    opacity: 1;
    background-color: blue;
}

YOZippazip
.外部{
不透明度：0.5；
背景色：红色；
}
.内部{
不透明度：1；
背景颜色：蓝色；
}

一种可能的解决方法是使用伪元素来伪造背景，如下所示：

YOZippazip
.外部{
位置：相对位置；
}
.外：以前{
位置：绝对位置；
显示：块；
内容：“；
排名：0；
左：0；
宽度：100%；
身高：100%；
不透明度：0.3；
背景色：红色；
z指数：-1；
}
.内部{
不透明度：1；
背景颜色：蓝色；
}

现在，标题本身是完全不透明的，没有背景。背景由
：before
伪元素生成。这可以是半透明的，而不会影响标题的其他内容，因为该内容不在伪元素内。
您应该使用不透明背景保存png（例如80%），并且只更改所需div的背景。这就是我的想法

例如：

div#navigation {background: url('/src/image.png') center center repeat;}

在这种情况下，带有不透明度的png适用于元素背景，所有其他内容（文本等）都完全可见。
图像示例：

或添加CSS rgba背景样式：

background:rgba(0,0,0,0.5);

如果您的背景是彩色的（不是图像），那么您可以使用
rgba
而不是像这样使用
hash
来指定颜色：
背景色：rgba（200100200,0.5）
（最后一个数字是不透明度从0到1）
嗨，请使用仅使背景不透明度的rgba背景

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


标志图片在这里
导航代码在这里
.导航{
不透明度：0.6；
}
.导航#标志{
不透明度：1.0；
}
制作一个js fiddle示例这么多HTML不制作任何有意义的副本我不知道如何制作自己的fuddle:（通过一些小技巧，可以获得它。例如CSS3 alpha颜色模式或不透明png:）。等等，我到底需要在该图像上看到什么？除了一个很小的黑色正方形？就这些。将重复此图像。这个小正方形是黑色的，但有点不透明。试试我的代码，你会看到结果的。记住将/src/image.png更改为该图像的url。然后会得到一个黑色/灰色覆盖，对吗？覆盖半透明图像并不能使其下面的东西透明。不，你可以得到这个元素的透明背景。在这种情况下，该元素内部的所有内容都是可见的，而该元素的背景只有一个是透明的。当背景是透明的，你可以看到它下面的东西。还记得浏览器支持。我认为这个特性是CSS3，并不是每个浏览器都能很好地支持它。但这是额外的功能，所以这个解决方案也很好。我真的没有想过。Thnks Kiran；）
<div class="navigation">
        <div class="logo"> logo image here  </div>
        <nav> navigation code here </nav>
    </div>

.navigation{
  opacity:0.6;
}
.navigation #logo{
  opacity:1.0;
}