Css opacity attribute

Question

I have one question. Here is example:

nav {
  width: 100%;
  background: #000;
  opacity: 0.8;
}

ul {
  background: green;
  opacity: 1;
}

<nav>
  <ul>
    <li>Link1</li>
    <li>Link2</li>
  </ul>
</nav>
<header>
  <h1>123</h1>
</header>

And problem is that, ul is also have opacity. By all this I mean that nav tag is okay, it has opacity of 0.8, but my ul tag shoud not have opacity, and it doesn't if you look in css in browser, but I still can see h1 text behind the ul and li tag.

score 4 · Accepted Answer · answered Oct 10 '17 at 05:44

4

nav {
  width: 100%;
  //background: #000;
  //opacity: 0.8;
  background-color: rgba(0, 0, 0, 0.8);
}

ul {
  background: green;
  //opacity: 1;
}

<nav>
  <ul>
    <li>Link1</li>
    <li>Link2</li>
  </ul>
</nav>
<header>
  <h1>123</h1>
</header>

How about using rgba()?

answered Oct 10 '17 at 05:44

kyun

9,710
9
31
66

Thanks, It worked! – Genjik Oct 10 '17 at 05:48
@Genjik I think you forgot to accept the answer. – kyun Oct 10 '17 at 07:34

Carl Binalla · Answer 2 · 2017-10-10T05:50:52.723

1

You need to use rgba(), where the 4th parameter takes 0.0 for fully transparent up to 1.0 for fully opaque while the first three parameter takes the red, blue, green value of the color you want to use.

nav {
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

ul {
  background: green;
  opacity: 1;
}

<nav>
  <ul>
    <li>Link1</li>
    <li>Link2</li>
  </ul>
</nav>
<header>
  <h1>123</h1>
</header>

edited Oct 10 '17 at 05:50

answered Oct 10 '17 at 05:45

Carl Binalla

5,393
5
27
46

Css opacity attribute

2 Answers2