【发布时间】：2015-04-27 20:55:32
【问题描述】：
通过这个小实验，我几乎达到了我想要达到的程度。我是 css3 的新手，并且仍然渴望学习一些东西。
我正在尝试让导航栏在 div 中显示/显示，并在其上方放置背景图像。关键是 bg 图像必须位于导航栏的顶部，如下面的图像链接所示。
http://visionsic.github.io/DSW_II/img/example.jpg
实际编码正确的功能导航栏在这里：
http://visionsic.github.io/DSW_II/test.html
我无法在导航栏顶部显示完整的背景图片。
背景图片的宽度为 704 像素，高度为 318 像素。导航栏的高度为 65 像素，宽度为 704 像素。所以div的完整高度大小是383px。我想强调一下，我不希望导航栏覆盖图像，我希望它是背景图像，然后是导航栏。
真正的非功能代码如下：
.mm_pres_main {
background-image: url(../img/mm_main_tab_d.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: auto;
}
.mm_pres_main #mm_lft_nav_div {
margin: 0%;
background-position: 0%;
background-color: #004E27;
max-width: 704px;
max-height: 100px;
background-repeat: no-repeat;
position: relative;
}
.mm_pres_main #mm_lft_nav_div nav {
text-align: center;
max-width: 704px;
width: 100%;
max-height: 100%;
margin-top: 0%;
display: block;
position: absolute;
}
.mm_pres_main #mm_lft_nav_div nav:after {
content: "";
display: table;
clear: both;
}
.mm_pres_main #mm_lft_nav_div nav ul {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
position: relative;
}
.mm_pres_main #mm_lft_nav_div nav ul li {
font-size: 1.1em;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: lighter;
text-align: center;
list-style: none;
line-height: 1.1em;
position: absolute;
padding: 6.5% 0% 0% 0%;
height: 100px;
width: 60px;
color: #FCE011;
display: inline-block;
float: left;
min-width: 20%;
background-color: #004E27;
overflow: auto;
}
.mm_pres_main #mm_lft_nav_div nav ul li.bio_icon,
.mm_pres_main #mm_lft_nav_div nav ul li.stat_icon,
.mm_pres_main #mm_lft_nav_div nav ul li.img_icon,
.mm_pres_main #mm_lft_nav_div nav ul li.vid_icon,
.mm_pres_main #mm_lft_nav_div nav ul li.fut_icon {
position: relative;
max-height: 100px;
max-width: 60px;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: 100px 40px;
display: block;
overflow: auto;
}
.mm_pres_main #mm_lft_nav_div nav ul li.bio_icon {
background-image: url(../svg/bio_ore_ylw.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.stat_icon {
background-image: url(../svg/stats_ore_ylw.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.img_icon {
background-image: url(../svg/img_ore_ylw.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.vid_icon {
background-image: url(../svg/vids_ore_ylw.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.fut_icon {
background-image: url(../svg/fut_ore_ylw.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.bio_icon a,
.mm_pres_main #mm_lft_nav_div nav ul li.stat_icon a,
.mm_pres_main #mm_lft_nav_div nav ul li.img_icon a,
.mm_pres_main #mm_lft_nav_div nav ul li.vid_icon a,
.mm_pres_main #mm_lft_nav_div nav ul li.fut_icon a {
clear: left;
position: relative;
display: block;
max-height: 60px;
text-decoration: none;
color: #F6EF1B;
overflow: auto;
}
.mm_pres_main #mm_lft_nav_div nav ul li:hover {
background-color: #F6EF1B;
}
.mm_pres_main #mm_lft_nav_div nav ul li:hover a {
color: #004E27;
cursor: pointer;
}
.mm_pres_main #mm_lft_nav_div nav ul li.bio_icon:hover {
background-image: url(../svg/bio_ore_grn.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.stat_icon:hover {
background-image: url(../svg/stats_ore_grn.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.img_icon:hover {
background-image: url(../svg/img_ore_grn.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.vid_icon:hover {
background-image: url(../svg/vids_ore_grn.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.fut_icon:hover {
background-image: url(../svg/fut_ore_grn.svg);
}<!doctype html>
<html>
<!----------------------Head Content Area----------------------------------------------->
<head>
<meta charset="UTF-8">
<title>test background nav expirement</title>
<meta name="viewport" content="width=device-width, maximum scale=1.0, minimum scale=1.0, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/subnav.css">
</head>
<!----------------------Body Content Area----------------------------------------------->
<body>
<!----------------------Main Presentation Content Area----------------------------------------------->
<div class="mm_pres_main">
<!----------------------Left Sub-Navigational Content Area----------------------------------------------->
<div id="mm_lft_nav_div">
<nav>
<ul>
<li class="bio_icon"><a href="#bio">Bio</a>
</li>
<li class="stat_icon"><a href="#stats">Stats</a>
</li>
<li class="img_icon"><a href="#images">Images</a>
</li>
<li class="vid_icon"><a href="#videos">Videos</a>
</li>
<li class="fut_icon"><a href="#future">Future</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>【问题讨论】：
标签： html css positioning background-position