2013-03-20 63 views
1

我开始设计我的投资组合,我有这个问题,我设置了一个背景图案,但我想在这个图案上再添加1个颜色和1个切片图像。我开始编写代码,一切都很好,除了我的导航菜单和其他东西都在我添加的这种颜色和图片之下。这是HTML代码和CSS。请帮忙?!?HTML 5背景在导航菜单上?

<!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% 
    } 
+0

请向我们提供一个[的jsfiddle(http://jsfiddle.net),以更好地说明问题 – user2129623 2013-03-20 21:50:08

+0

抛出一些不透明属性为你的背景 – 2013-03-20 21:53:20

回答

0

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

+0

谢谢你这是工作:) – Stoqn 2013-03-21 10:14:53

+0

接受呢? :) – Adrian 2013-03-21 13:47:13

+0

我应该接受什么? – Stoqn 2013-03-21 16:06:35