我的网页使用整页拉伸背景图像。我的问题是背景图片似乎覆盖了我尝试以重复背景图片的形式添加的前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,但没有解决方案。对于我做错的任何事情,我们深表感谢。请注意,这种全页背景图像的实现是我用图像实现的最好的效果,因此,如果有解决方案,那将是一个很好的选择。
啊,设法自己搞定。对于以后的读者,我需要做的只是添加
position:absolute;
至#banner代码。
我知道这是6岁的帖子,但这只是解决了我遇到的问题,因为要重复横幅。因此,如果您看到此评论,谢谢。