0

我的网页使用整页拉伸背景图像。我的问题是背景图像似乎覆盖了我试图以重复背景图像的形式添加的顶部 10px 横幅/标题（所以我可以使用 CSS 不透明度）。这是完整的页面：

<html><head>
<style type="text/css" media=screen>

body{
    margin: 0px;
    color: #000;
    font-family: helvetica, times;
    font-size: 14px;
}

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

#banner{
  background: url('images/banner2.gif');
  background-repeat: repeat-x;
  top: 0;
  left: 0;
  width: 100%;
  padding:50px;
  text-align: center;
}

</style></head>

<body>

<img src="images/background.jpg" id="bg">

<div id="banner">
Banner Test Text
</div>

</body>
</html>

我尝试添加 z-index 但没有解决方案。非常感谢我做错的任何输入。请注意，整页背景图像的这种实现是我用我的图像实现的最好的，所以如果有一个解决方案来适应它，那就太好了。

4

1 回答 1

0

啊，自己设法弄到了。对于任何未来的读者，我需要做的就是添加

position:absolute;

到#banner 代码。

于 2013-03-10T05:50:42.550 回答