0

基本的に、ナビゲーション バーの不透明度は 0.6 (IE 8 以前では 60) です。ただし、そのナビゲーション バー内にあるものはすべて不透明度が 0.6 のようです。これには、私の Web サイトのロゴが含まれます。不透明にしたくないので、普通にしたいだけです。不透明にならないようにするにはどうすればよいですか？

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

可能であれば、これを修正する方法についてのアイデアはありますか? 私は何人かの友人に尋ねましたが、彼らは方法がわからない、または不可能であると言いました。

4

5 に答える 5

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

あなたが達成しようとしているのは、不透明度の継承を防ぐことです。回避策があります：

CSS で親から子の不透明度を継承したくない

于 2013-06-14T20:05:17.637 に答える
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 に答える