HTML5背景在导航菜单上?
我开始设计我的公文包,我有一个问题,我为背景设置了一个图案,但我想在这个图案上再加一个颜色和一个切片图像。我开始编写代码,一切都很好,除了我的导航菜单和其他东西都在我添加的颜色和图片下。这是HTML代码和CSS。请帮忙HTML5背景在导航菜单上?,html,Html,我开始设计我的公文包,我有一个问题,我为背景设置了一个图案,但我想在这个图案上再加一个颜色和一个切片图像。我开始编写代码,一切都很好,除了我的导航菜单和其他东西都在我添加的颜色和图片下。这是HTML代码和CSS。请帮忙 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Wrapping up HTML5</title> <li
<!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>
尝试应用
z-index
来控制页面上元素的分层。请为我们提供一个更好地说明问题的方法将一些不透明属性添加到您的背景中回答:
@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%
}