css - 多重背景 : Semi-Transparent Color on a BG

Question

我正在尝试在背景图像之上创建一个具有半透明颜色的背景。现在我使用 RGBA 作为颜色背景层的半透明，但网页只显示图像。

我想做的是让一个元素在滚动页面时隐藏在后面并且不可见，并且该元素在我的固定标题后面，如果标题下有文本，它看起来很糟糕。

随时要求澄清。

图像: 不滚动时是什么:http://prntscr.com/7llsd8 滚动:http://prntscr.com/7lls40

代码:

#headerbg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 2;
  background: rgba(255, 153, 0, 0.79), url(../images/bg.png);
  -webkit-box-shadow: 0px 3px 18px -1px rgba(21, 20, 19, 1);
  -moz-box-shadow: 0px 3px 18px -1px rgba(21, 20, 19, 1);
  box-shadow: 0px 3px 18px -1px rgba(21, 20, 19, 1);
}

<div id="headerbg">
  <div class="container">
    <div class="row">
      <div class="five columns">
        <img src="images/thv-header.png" id="header">
      </div>
      <div class="seven columns">
        <nav>
          <ul>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
            <li><a href="#designers">Designers</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>

Answer 1

查看下面的更新代码。现在页眉具有背景颜色和多个背景图像

#headerbg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 2;
  background-color: rgba(255, 153, 0, 0.79);
  background-image: url(http://www.transparenttextures.com/patterns/back-pattern.png), url(http://www.transparenttextures.com/patterns/batthern.png);
  -webkit-box-shadow: 0px 3px 18px -1px rgba(21, 20, 19, 1);
  -moz-box-shadow: 0px 3px 18px -1px rgba(21, 20, 19, 1);
  box-shadow: 0px 3px 18px -1px rgba(21, 20, 19, 1);
}

<div id="headerbg">
  <div class="container">
    <div class="row">
      <div class="five columns">
        <img src="images/thv-header.png" id="header">
      </div>
      <div class="seven columns">
        <nav>
          <ul>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
            <li><a href="#designers">Designers</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>