0

我正在尝试制作一个保持浮动在顶部的静态标题。背景也是静态的，

不知何故，背景似乎隐藏了标题并显示在标题前面。

<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}


#mainframe{
    color: #FFF;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
    }
#right{
    float:right;
    width: 479px;
    }
#left{
    float:left;
}
#footer{
    text-align: right;
    clear: both;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    padding-right: 50px;
    border-top-width: 1px;
    border-top-style: dotted;
    border-top-color: #F00;
    padding-top: 10px;
    font-size: 10px;
    padding-bottom: 10px;
    background-image: url(images/bartrans.png);
    text-transform: none;
    text-decoration: none;
}
#txt{
    clear: both;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    margin-top: 10px;
    font-size: 12px;
    }
a {
    text-decoration: none;
    color:#FFF;
    }
    #header {
    position:fixed;
top:0;
    left:0;
    width:100%;
    height:50px;
    border: 1px dotted #F00;
    margin-top: 20px;
}
#headercontent {
    background-color: #F00;
    width: 900px;
    margin-right: auto;
    margin-left: auto;  


    }
</style>

<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>

<body>
<div id="header">
<div id="headercontent">
<img src="images/fmenewlogo.png" width="327" height="133" />

</div>



</div>
<div id="page-background"><img src="images/Music_Equalizer_by_Merlin2525.png" width="100%" height="100%" alt="Smile"></div>

我在这里错过了什么吗？

4

2 回答 2

0

您只需要添加z-index: 10;到#headercss 规则和z-index: 0;规则#page-background。你可以在这里看到我的小提琴。

于 2012-07-03T18:27:43.460 回答
0

我不会设置#page-background为position: fixed;

您可以将 background-image 或您使用的任何内容设置为background-attachment: fixed;，因此，当您将 header 元素设置为时，position: fixed;它们不会发生冲突。我希望我们有更多的工作要做，比如指向您正在处理的页面的链接。

没有您正在使用的资产，很难为您创建测试环境。

此外，我认为另一个问题是您正在使用 DIV 元素来设置背景图像。

将背景图像应用到 BODY 元素，您就不必担心这些了。

在此处查看 JSFiddle 以查看我正在使用的代码：http: //jsfiddle.net/mikelegacy/5P7TN/

请注意，我已删除 #page-background ID 并使用 BODY 元素应用背景图像。您不应该使用 DIV 应用整页背景图像，这不是语义。

以下是您应该如何在编辑器中复制/粘贴的代码：

<html>
<head>
<style type="text/css">
html, body {
     height:200%; 
     margin:0; 
     padding:0;}
body { 
    background-image: url(images/Music_Equalizer_by_Merlin2525.png); 
    background-attachment: fixed; 
    background-position: 0 0; 
    background-repeat: repeat; }
#content {
    position:relative; 
    z-index:1; 
    padding:10px;}


#mainframe{
    color: #FFF;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
    }
#right{
    float:right;
    width: 479px;
    }
#left{
    float:left;
}
#footer{
    text-align: right;
    clear: both;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    padding-right: 50px;
    border-top-width: 1px;
    border-top-style: dotted;
    border-top-color: #F00;
    padding-top: 10px;
    font-size: 10px;
    padding-bottom: 10px;
    background-image: url(images/bartrans.png);
    text-transform: none;
    text-decoration: none;
}
#txt{
    clear: both;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    margin-top: 10px;
    font-size: 12px;
    }
a {
    text-decoration: none;
    color:#FFF;
    }
    #header {
    position:fixed;
top:0;
    left:0;
    width:100%;
    height:50px;
    border: 1px dotted #F00;
    margin-top: 20px;
}
#headercontent {
    background-color: #F00;
    width: 900px;
    margin-right: auto;
    margin-left: auto;  


    }
</style>

<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
    <![endif]-->
    </head>

    <body>
    <div id="header">
    <div id="headercontent">
    <img src="images/fmenewlogo.png" width="327" height="133" />

    </div>

    </div>
    </body>

​这里是全屏背景图片的文章： http: //css-tricks.com/perfect-full-page-background-image/

这里的一些方法使用和IMG标签来设置背景图片。不完全是语义，但它是旧浏览器的黑客攻击。如果可以的话，我建议只使用background-size: cover;

于 2012-07-03T18:27:53.120 回答