CSS-菜单不透明时，Nav透明背景

Question

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

我想给标题加上黑色，并使它变成0.5透明，这样它上方的白色菜单就更可见了。

我的问题是，当我尝试将黑色分配给标题div元素中的任何一个并分配不透明度时，整个过程变得透明了，包括应该位于顶部的徽标和菜单。

标题菜单具有以下结构：

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

但是，当我再次这样做时，包括导航菜单和徽标图像在内的整个过程变得透明。

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

Answer 1

你应该试试这个

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

而不是给opacity给背景rgba