Question

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

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

随意要求澄清。

图片：不滚动时的含义：http://prntscr.com/7llsd8 滚动：http://prntscr.com/7lls40

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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;

多个背景：BG上的半透明色

2 个答案: