多背景:背景上的半透明颜色

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>

Answer 2

我使用线性渐变来伪造背景，效果很好！

background:linear-gradient(rgba(255,
154,
0,
0.79),
rgba(255,
154,
0,
0.79)),
url(../images/bg.png) no-repeat left top fixed;