修改

Question

如果您查看此链接，您可以看到我在#header div中嵌入了导航菜单。标题只是使导航居中并提供背景颜色和图像。我正在努力实现一个＆＃34;固定＆＃34;具有背景颜色ON TOP背景图像的标题。我似乎无法把它弄好，用z-index和级联玩没有运气。有什么建议吗？

如果你将位置改为＆＃34;绝对＆＃34;我可以让它正常显示对于#header

修改

对不起，这是一个jsfiddle，我没有意识到jsbin允许实时编辑

http://jsfiddle.net/NuBUV/

Answer 1

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

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

Answer 2

与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跟随另一个div将具有相同的效果，如果它们都是position：absolute;

Answer 3

请参阅此http://jsfiddle.net/VjYAA/

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

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

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

无法获得背景色背后的背景

修改

3 个答案: