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;
    }

Please review how to create a [mcve]. This is a lot of code, most of which has nothing to do with your question. That will make it easier to understand exactly what you're talking about. — Heretic Monkey, Mar 22 '17 at 17:39
Possible duplicate of [CSS opacity only to background color not the text on it?](http://stackoverflow.com/questions/5135019/css-opacity-only-to-background-color-not-the-text-on-it) — Michael Coker, Mar 22 '17 at 17:52
@MichaelCoker Perhaps if certain people wouldn't jump to answer them... ;) — Heretic Monkey, Mar 22 '17 at 17:52
Possible duplicate of [How do I give text or an image a transparent background using CSS?](http://stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css) — TylerH, Mar 22 '17 at 20:51

Anish Goyal · Accepted Answer · 2017-03-22T17:44:00.327

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.

edited Mar 22 '17 at 17:44

answered Mar 22 '17 at 17:38

Anish Goyal

2,799
12
17

score 0 · Answer 2 · answered Mar 22 '17 at 17:42

0

you can simple add below css lines

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

answered Mar 22 '17 at 17:42

Akankha Ahmed

121
9

How can I change the opacity of a background colour?

2 Answers2