CSS 不透明度问题

Question

我有一个 psd 文件，我想将 psd 制作成 CSS。我尝试写 header 的 psd，其中有 opacity 如图所示。这是来自我的 index.html

包含 container div 的菜单。包含品牌和菜单的第二个容器

<nav class="menu">
    <div class="container">
        <div id="brand">
            <h1>Brandi</h1>
            <p>|    I’am your tag line</p>
        </div>
        <ul class="menu">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
</nav>

我的 css 写成：

.menu{
    width:100%;
    height:70px;
    background-color:#000;
    -moz-opacity:.60; 
    filter:alpha(opacity=60);
    opacity:.60; 
}

.container{
    width:80%;
    height:70px;
    margin:0 auto;
}

#brand{
    width:25%;
    height:auto;
    position:relative;
    top:10px;
}

#brand>h1{
    color: #fff;
    float:left;
    font-family: 'Pacifico', cursive;
    font-size : 28px;
}

#brand>p{
    color:#73797a;
    float:left;
    font-family: 'Open Sans', sans-serif;
    font-size : 13pt;
    margin-left:20px;
    line-height:50px;
}

如图h1元素和p元素也有我不想要的opacity。我该如何克服这个问题？

Answer 1

试试这个 css .menu

.menu{
    width:100%;
    height:70px;
    background-color: rgba(0,0,0, 0.6); /* provide opacity here */
    /* remove the opacity properties below
    -moz-opacity:.60; 
    filter:alpha(opacity=60);
    opacity:.60; 
    */
}

完整代码 -

.menu {
  width: 100%;
  height: 70px;
}
/* applied opacity to nav.menu */
nav.menu {
  background-color: rgba(0, 0, 0, 0.6);
}
ul.menu {
  background-color: rgba(0,0,0,0);
}
.container {
  width: 80%;
  height: 70px;
  margin: 0 auto;
  background-color: rgba(0,0,0,0);
}
#brand {
  width: 25%;
  height: auto;
  position: relative;
  top: 10px;
}
#brand>h1 {
  color: #fff;
  float: left;
  font-family: 'Pacifico', cursive;
  font-size: 28px;
}
#brand>p {
  color: #73797a;
  float: left;
  font-family: 'Open Sans', sans-serif;
  font-size: 13pt;
  margin-left: 20px;
  line-height: 50px;
}

<nav class="menu">
  <div class="container">
    <div id="brand">
      <h1>Brandi</h1>
      <p>| I’am your tag line</p>
    </div>
    <ul class="menu">
      <li>
        <a href="#"></a>
      </li>
      <li>
        <a href="#"></a>
      </li>
      <li>
        <a href="#"></a>
      </li>
      <li>
        <a href="#"></a>
      </li>
      <li>
        <a href="#"></a>
      </li>
    </ul>
  </div>
</nav>

CSS 不透明度问题

CSS Trouble with opacity

css

opacity