0

Basically, my navigation bar has an opacity of 0.6 (IE 8 and earlier, 60). However, everything that goes inside that navigation bar also seems to have an opacity of 0.6. This includes my website logo; which I don't want it to have any opacity, I just want it to be normal. How can I make it so that it doesn't have any opacity?

HTML:

<div id="navigation">
 <img class="logo" src="/images/logoO.png">
  <ul>
    <li><a href="/">Home</a></li>
    &nbsp;
    <li><a href="/blog">Latest News</a></li>
    &nbsp;
    <li><a href="/forums">Forum Boards</a></li>
    &nbsp;
    <li><a href="/report">Report A Bug</a></li>
    &nbsp;
    <li><a href="/disclaimer">Disclaimer</a></li>
  </ul>
</div>

CSS:

#navigation {
  opacity: 0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  background: #000000;
  width: 100%;
  height: 75px;
}

ul {
  display: inline;
  position: absolute;
  list-style-type: none;
}

li {
  display: inline-block;
}

a {
  color: #DCDCDC;
  font-family: PT Sans, Futura, Summer Jams, sans-seriff, Arial;
  font-weight: normal;
}

a:hover {
  color: #FFF;
}

#navigation > ul > li > a {
    -webkit-transition: color .15s;
    -moz-transition: color .15s;
    -o-transition: color .15s;
    transition: color .15s;
}

a:active {
  text-decoration: none;
}

a:link {
  text-decoration: none;
}

Any ideas on how to fix this, if possible? I've asked a few friends, and they said they don't know how to, or else it is not possible.

Thomas
  • 21
  • 3

5 Answers5

1

You can't "reset" opacity on child elements, once it is set on an element, you can only increase the transparency. opacity: 0.6; on a child element will make it 40% more transparent than it currently is (as opposed to setting it to 60% opacity).

Seeing as your #navigation has a solid (black) color you can use a transparent color instead, leaving all the elements at 100% opacity and only the background-color will be transparent.

#navigation {
  background: #000000; /* old browsers will still be black */
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 75px;
}
xec
  • 17,349
  • 3
  • 46
  • 54
1

Have you tried using background: rgba() instead of opacity?

#navigation {background: rgba(0, 0, 0, 0.6)}
c.millasb
  • 86
  • 4
  • 1
    This is the exact same answer I posted 5 minutes ago, except without an explanation or a fallback :/ – xec Jun 14 '13 at 20:13
  • 1
    When I started typing my answer yours was not there. I did not realize you had answered the same thing until after I posted it. I'm sure they'll pick your answer, nothing to worry about. – c.millasb Jun 14 '13 at 20:15
0

What you are trying to achieve is to prevent opacity inheritance. There is a workaround:

I do not want to inherit the child opacity from the parent in CSS

Community
  • 1
  • 1
mawcsco
  • 624
  • 6
  • 18
0

You can try this as well, set the opacity to the -ul- and change the background color to gray,

    #navigation
    {
        background: gray;
        width: 100%;
        height: 75px;
        z-index: 1;
    }
    ul
    {
        display: inline;
        position: absolute;
        list-style-type: none;
        opacity: 0.6;
        filter: alpha(opacity=60); /* For IE8 and earlier */
    }
shammelburg
  • 6,974
  • 7
  • 26
  • 34
0

It's.... rather odd, I don't quite get it, but I just commented out the opacity just to remove it (to see how it would look), and it actually worked. The navigation menu still has an opacity (the parent), but the text and logo/images don't (the children). I also have thatsNotYoChild.js installed, but it didn't work until the commenting.

Thomas
  • 21
  • 3