0

how can I reduce the opacity of the background of a tab in navbar without affecting the text in the tab itself? For example, opacity of the text "About Us" to be 1, but the background color to have an opacity of 0.5. Here is my CSS code.

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

3 Answers3

2

You should use rgba format for the color instead of hex. Use:

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

Here's a definition of rgba from Mozilla Developer website:

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;

Tushar Khatiwada
  • 2,019
  • 2
  • 20
  • 32
1

You could set the background as an RGBA value, for example:

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

Here the opacity (alpha) level is set as the 4th argument to the rgba(...) function. Support for rgba is pretty good now (http://caniuse.com/#search=rgba) but if you want to support IE8 then this isn't going to work.

Anthony Blackshaw
  • 2,549
  • 2
  • 16
  • 20
0

RGBA is definitely the way to go. Think of it like this: you are actually affecting the opacity of the background of the object, by implementing an opacity (alpha) factor straight to the background's color, and not the opacity of the object itsef. Thus, your code should be like this.

.navbar-default .navbar-nav > li > a:hover,
   .navbar-default .navbar-nav > li > a:focus{
       color: #FFFFFF;
       background-color: rgba(0, 158, 255, 0.5);
   }
Konstantinos Koletsas
  • 239
  • 1
  • 16