Question

基本上，我的导航栏的不透明度为0.6（IE 8及更早版本，60）。但是，导航栏内的所有内容似乎都具有0.6的不透明度。这包括我的网站徽标;我不希望它有任何不透明性，我只是希望它是正常的。我怎样才能使它没有任何不透明度？

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

如果可能，有关如何解决此问题的任何想法？我问了几个朋友，他们说他们不知道怎么做，否则就不可能。

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

Answer 2

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

#navigation {background: rgba(0, 0, 0, 0.6)}

Answer 3

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

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

Answer 4

您也可以尝试这一点，将不透明度设置为-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 */
    }

Answer 5

这是......相当奇怪，我不太明白，但我只是注意掉了它的不透明度（看它看起来怎么样），它确实有效。导航菜单仍然具有不透明度（父级），但文本和徽标/图像不具有（子级）。我也安装了thatNotYoChild.js，但在评论之前它没有用。

如何在不透明度不具有不透明度的导航栏内制作图像？

5 个答案: