CSS更改选项卡背景的不透明度而不影响选项卡上的文本[重复]

Posted 2023-03-06

【中文标题】CSS更改选项卡背景的不透明度而不影响选项卡上的文本[重复]

【英文标题】：CSS to change the opacity of tab background witout affecting text on tab [duplicate]

【发布时间】：2015-12-16 16:14:49

【问题描述】：

如何在不影响选项卡本身的文本的情况下降低导航栏中选项卡背景的不透明度？ 例如，文本“关于我们”的不透明度为 1，但背景颜色的不透明度为 0.5。 这是我的 CSS 代码。

.navbar-default .navbar-nav > li > a:hover,
   .navbar-default .navbar-nav > li > a:focus
       color: #FFFFFF;
       background-color: #009eff;
   

【参考方案1】：

您应该使用rgba 格式的颜色而不是hex。使用：

background-color: rgba(0, 158, 255, 0.5);

这是来自 Mozilla 开发者网站的rgba 的定义：

可以使用红绿蓝阿尔法模型 (RGBa) 定义颜色 rgba() 函数符号。 RGBa 将 RGB 颜色模型扩展到 包括 alpha 通道，允许指定 a 的不透明度 颜色。

a 表示不透明度：0=透明； 1=不透明；

【参考方案2】：

您可以将背景设置为 RGBA 值，例如：

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus 
    color: #FFFFFF;
    background-color: rgba(0, 158, 255, 0.5);

此处不透明度 (alpha) 级别设置为 rgba(...) 函数的第四个参数。对rgba 的支持现在很好（http://caniuse.com/#search=rgba），但如果你想支持 IE8，那么这将不起作用。

【参考方案3】：

RGBA 绝对是要走的路。可以这样想：您实际上是通过将不透明度 (alpha) 因子直接应用于背景颜色而不是对象本身的不透明度来影响对象背景的不透明度。因此，您的代码应该是这样的。

.navbar-default .navbar-nav > li > a:hover,
   .navbar-default .navbar-nav > li > a:focus
       color: #FFFFFF;
       background-color: rgba(0, 158, 255, 0.5);