CSS 改变选项卡背景的不透明度而不影响选项卡上的文本

标签 css twitter-bootstrap-3

<分区>

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

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

最佳答案

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

背景颜色:rgba(0, 158, 255, 0.5);

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

Colors can be defined in the Red-green-blue-alpha model (RGBa) using the rgba() functional notation. RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color.

a means opacity: 0=transparent; 1=opaque;

关于CSS 改变选项卡背景的不透明度而不影响选项卡上的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32670212/

上一篇:html - 即使我在 bootstrap 中使用 col-lg-6,如何使我的表单控件内联?

下一篇:javascript - jquery - 将类添加到具有多个类的现有 div

相关文章:

html - 具有垂直位置效果的 Bootstrap 按钮

css - 滚动时防止附加元素跳转

html - Bootstrap 表单内联不与验证消息居中

html - 如何让我的栏目内容并排显示

css - Bootstrap Nav pills a :visited not working

javascript - 单击另一页上的按钮时更改 div 的颜色

html - 单选按钮更改 CSS 背景颜色或背景图像(没有标签的简单代码)

html - 在 PX 和百分位之间选择

css - 图像的尺寸、分辨率和质量建议

css - 如何调试 less css 变量