如何在HTML / CSS中创建具有半透明背景的Navbar

Question

我正在使用HTML和CSS为我的网站编写代码，并且我正在尝试使之导航栏的背景是半透明的，但是我不希望整个导航/文本在以下位置是透明的全部。

该网站的背景为黑色，所有文本均为白色，这是一个单滚动页面。这个想法是，当用户在站点上导航时，导航栏后面将有一个半透明的黑色栏，这样当用户将其滚动到白色图像/其他白色文本上时，导航栏不会丢失（因为导航文本是也白）。我知道如何更改整个导航栏的透明度，但是有没有办法仅更改导航背景的透明度？

当前，我尝试将背景色设置为黑色，然后将opacity属性设置为0.5，但这最终会影响整个导航栏，而不仅是背景。我也尝试过向导航栏添加一个类，并向该类添加背景属性，但是结果相同。

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

考虑到背景是白色，文本的颜色也是白色，应该可以解决问题。