Question

我开始设计我的投资组合，我遇到了这个问题，我为背景设置了模式，但我希望在这个模式上有1个颜色和1个切片图像。我开始编码它，一切都很好，除了我的导航菜单和其他东西都在这个颜色和图片，我添加。这是HTML代码和CSS。请帮忙？！？

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wrapping up HTML5</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="top-wrap">
<div id="cornerfill"><div class="fillmask"></div></div>
    <div id="fillright"><div class="rightfill"></div></div>
</div>
<div id="wrapper">
<header><h1>Using a HTML5 wrapper</h1></header>
    <section>
        <article>
            <hgroup>
            <h1>This is actually legal</h1>
            <h2>Just wrap everything in a div, just like before</h2>
            </hgroup>
            <p>But it's probably better to simply use the body tag.</p>
        </article>
    </section>
    <footer><p>Love from Kebman</p></footer>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */


html
{
    width:100%;
    height:100%;
}


body {
    width: 100%;
    height: 100%;
    min-width:960px;
    min-height:600px;
    margin: 0; 
    padding: 0;
    background: #FFF url(../img/bg.png) fixed;
}

#cornerfill
{
    position:fixed;
    top:0;
    left:0;
    width:50%;
    height:100%
        }

#cornerfill .fillmask
{
    width:  100%;
    height: 100%;
    background-color:#070707;}

#fillright {
    position:fixed;
    top: 0;
    right: 0;
    width:50%;
    height: 100%;
}

#fillright .rightfill
{
    margin-left:-20px;
    width:  600px;
    height: 100%;
    background:url(../img/bgup.png) left bottom no-repeat;
}

#wrapper{
    width: 960px;
    margin: 0 auto;

    }
header
{ width:auto;
height:auto;
background:#FFF;}

#top-wrap
{
    width:100%
    height:40%
    }

Answer 1

尝试应用z-index来控制页面上元素的分层。

HTML 5背景在导航菜单上？

1 个答案: