我開始設計我的投資組合,我有這個問題,我設置了一個背景圖案,但我想在這個圖案上再添加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%
}
請向我們提供一個[的jsfiddle(http://jsfiddle.net),以更好地說明問題 – user2129623 2013-03-20 21:50:08
拋出一些不透明屬性爲你的背景 – 2013-03-20 21:53:20