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.

4

5 回答 5

1

您是否尝试过使用background: rgba()而不是不透明度？

#navigation {background: rgba(0, 0, 0, 0.6)}
于 2013-06-14T20:10:09.307 回答
1

您不能在子元素上“重置”不透明度，一旦在元素上设置它，您只能增加透明度。opacity: 0.6;在子元素上将使其比当前透明 40% （而不是将其设置为 60% 不透明度）。

看到你#navigation的颜色是纯色（黑色），你可以改用透明色，让所有元素保持 100% 的不透明度，只有背景色是透明的。

#navigation {
  background: #000000; /* old browsers will still be black */
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 75px;
}
于 2013-06-14T20:05:44.963 回答
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.

于 2013-06-14T22:25:48.280 回答
0

你也可以试试这个，将不透明度设置为 -ul- 并将背景颜色更改为灰色，

    #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 */
    }
于 2013-06-14T20:11:47.293 回答
0

您要实现的是防止不透明继承。有一个解决方法：

我不想从 CSS 中的父级继承子级不透明度

于 2013-06-14T20:05:17.637 回答