html - CSS - 导航透明背景而菜单不透明

Question

我正在处理 header 当前透明的主题 - 没有分配颜色。如您所见，上面有一个 Logo 图像和导航 div。

我想给标题设置黑色并使其透明 0.5，这样上面的白色菜单就更明显了。

我的问题是，当我尝试将黑色分配给任一标题 div 元素并分配不透明度时，整个事情变得透明，包括应该在顶部的 Logo 和菜单。

标题菜单的结构如下:

<div class="main_header">
    <div class="header_parent_wrap">
       <header>
          <div class="logo_section">
             <a class="logo">
                 <img>
             </a>
          </div>
          <div class="menu_section">
             <div class="menu"></div>
          </div>
       </header>
    </div>
</div> 

我正在尝试将黑色和不透明度分配给 main_header 元素或 header_parent_wrap 元素，如下所示:

.header_parent_wrap {
    background-color: #000000;
    opacity: 0.5;
}

但当我再次这样做时，整个内容都变得透明，包括导航菜单和 Logo 图像。

如何实现只有黑色和半透明背景，而不是图像或菜单？

Answer 1

你应该试试这个

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

而不是给 opacity 给背景 rgba