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