如何在 HTML/CSS 中創建具有半透明背景的導航欄

Question

我正在為我的網站使用 HTML 和 CSS 編寫代碼，並且我正在嘗試使其導航欄后面的背景是半透明的，但我不希望整個導航/文本完全透明。

該網站背景為黑色，所有文字均為白色，為單滾動頁面。 這個想法是，當用戶瀏覽網站時，導航欄后面會有一個半透明的黑條，這樣當用戶在白色圖像/其他白色文本上滾動導航欄時，導航欄不會丟失（因為導航文本是也是白色的）。 我知道如何改變整個導航欄的透明度，但有沒有辦法只改變導航背景的透明度？

目前，我嘗試將背景顏色設置為黑色，然后將 opacity 屬性設置為 0.5，但這最終會影響整個導航欄，而不僅僅是背景。 我還嘗試將 class 添加到導航並將背景屬性添加到 class，但結果相同。

    nav {
  overflow: hidden;
  position: fixed; 
  background-color: black;
  top: 0; 
  width: 100%;   
  z-index: 9999;
}

Answer 1

您是否嘗試過rgba()顏色定義中的不透明度參數？

nav {
    background-color: rgba(0, 0, 0); // Some old browsers might not accept the opacity parameter
    background-color: rgba(0, 0, 0, 0.5);
}

考慮到您的背景是白色的，而且文本的顏色是白色的，它應該可以解決問題。