如何更改背景颜色的不透明度？

Question

问题1

我想知道当用户将鼠标悬停在导航栏上时，是否有人可以帮助我更改下拉背景颜色的不透明度。我尝试查看其他教程。然而我却没有那么幸运。

这是我的代码

    .navbar.navbar-default ul li:after {
      content: '';
      position: absolute;
      right: 50%;
      bottom: 0;
      left: 50%;
      height: 3px;
      background-color: #FFFFFF;
      border-radius: 9px;
      transition: all .2s;
    }
    
    .navbar.navbar-default ul li a:hover {
      color: white;
    }
   

Answer 1

使用 rgba() 设置背景颜色。

rgba 采用红色、绿色、蓝色和不透明度值，而不是十六进制，如下所示：

background-color: rgba(20, 50, 40, 0.5)

rgb 值为 0 到 255，不透明度为 0 到 1。

您可以使用这样的网站：http://www.colorhexa.com/4f5f4f来帮助您将十六进制值转换为RGB值。

不幸的是，CSS 不支持十六进制颜色的 alpha 值。

Answer 2

您可以简单地添加以下CSS行

.navbar.navbar-default ul li a:hover {
    color: white;
    background: rgba(61, 63, 74, 0.8);
}