How can I change the opacity of a background colour?

Question

Question 1

I was wondering if anyone can help me change the opacity of the drop down background colour when the user hovers over it on the nav bar? I have tried look at other tutorials. However, I have had no luck.

Here is my code

    .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

Use rgba() to set your background color.

Instead of hex, rgba takes a red, green, blue, and opacity value, like so:

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

The rgb values are 0 to 255, opacity is 0 to 1.

You can use sites like this: http://www.colorhexa.com/4f5f4f to help you convert hex values to rgb values.

CSS, unfortunately, doesn't support alpha values in hex colors.

Answer 2

you can simple add below css lines

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