html - 无法在背景色后面获得背景

Question

http://jsbin.com/opopup/2/edit

#header如果您查看此链接，您会看到我在div 中嵌入了一个导航菜单。标题只是为了使导航居中并提供背景颜色和图像。我正在尝试实现在背景图像顶部具有背景颜色的“固定”标题。我似乎做错了，玩 z-index 和级联没有运气。有什么建议么？

如果您将位置更改为“绝对”，我可以让它正确显示#header

编辑

抱歉，这是一个 jsfiddle，我没有意识到 jsbin 允许实时编辑

http://jsfiddle.net/NuBUV/

Answer 1

就像 JanR 提到的那样，问题源于 div 是 header 元素的子元素。您可以像这样交换颜色和图像所在的元素：

.blurry {
    background:url('http://colourlovers.com.s3.amazonaws.com/blog/wp-content/uploads/2008/09/colorful_by_souhail88.jpg') 50% 0 no-repeat fixed;
}
.one { 
    background-color:rgba(255,255,255,.5);
    left:0;right:0;top:0;bottom:0;
    position:absolute;
}

或在 .one 之后添加另一个 div 并使用类似的绝对样式将颜色覆盖在上面。

在第一种情况下，.one 元素覆盖了父元素 (.blurry) 的图像背景。在第二种情况下，如果两个 div 都是 position:absolute;

Answer 2

看到这个http://jsfiddle.net/VjYAA/

您想将图像背景包裹在 nav 元素周围，该元素将具有半透明背景色。在不透明的旧版本 ie 上，您可能会遇到此问题。

无论如何，这是相关的东西 -

HTML -

<div id="header" class='one'>
  <nav class="blurry">
    <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>Services</a></li>
      <li><a>Works</a></li>
      <li><a>Rates</a></li>
      <li><a>Contact</a></li>
    </ul>
  </nav>
</div>

CSS -

.blurry {
  background-color:rgba(255,255,255,.5);
}
.one { 
  background:url('http://colourlovers.com.s3.amazonaws.com/blog/wp-content/uploads/2008/09/colorful_by_souhail88.jpg') 50% 0 no-repeat fixed;
}

Answer 3

我的建议是不要将背景颜色放在标题上，因为图像 div 是这个的子对象。

我会在标题中添加第二个带有背景颜色的 div，因此您最终将拥有一个带有导航和背景图像的 div，以及一个带有背景颜色的 div。然后，您可以使用 z-index 和定位来将一个覆盖在另一个之上。您可能需要设置一些不透明度或其他东西。