This question already has answers here:
Opacity of background-color, but not the text [duplicate]
                                
                                    (5个答案)
                                
                        
                                4年前关闭。
            
                    
如何降低导航栏中标签背景的不透明度,而又不影响标签本身中的文本?
例如,文本“关于我们”的不透明度为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。采用:

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

这是Mozilla Developer网站上rgba的定义:


  可以使用以下命令在“红-绿-蓝-alpha”模型(RGBa)中定义颜色
  rgba()功能符号。 RGBa将RGB颜色模型扩展为
  包括Alpha通道,从而可以指定a的不透明度
  颜色。
  
  a表示不透明度:0 =透明; 1 =不透明;

关于css - CSS更改标签背景的不透明度,而不会影响标签上的文字,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32670212/

10-12 12:28
查看更多