CSS麻烦不透明

Question

我有一个psd文件，我想将psd制作成CSS。我试着编写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

为.menu

尝试此css

.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>