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