如何在 HTML/CSS 中创建具有半透明背景的导航栏答案

【问题标题】：How To Create A Navbar With SemiTransparent Background In HTML/CSS如何在 HTML/CSS 中创建具有半透明背景的导航栏
【发布时间】：2020-09-12 07:21:39
【问题描述】：

我正在为我的网站使用 HTML 和 CSS 编写代码，并且我正在尝试使其导航栏后面的背景是半透明的，但我不希望整个导航/文本都是透明的完全没有。

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

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

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

【问题讨论】：

【解决方案1】：

你试过rgba()颜色定义中的opacity参数吗？

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

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

【讨论】：