【发布时间】：2017-05-27 05:45:08
【问题描述】：
我正在尝试将图像放在背景图像的顶部以及下拉菜单下方的两个图像之上。 （此问题的所有图片均来自谷歌，您可以查看）
所以按顺序[从上到下]
下拉
摩托车
背景
如果有人能提供帮助，将不胜感激：D
/* Drop Down Menu */
body {
margin: 0;
}
.navClass {
padding-right: 5px;
position: absolute;
top: 0; right: 0;
}
.right {
float: right;
}
.navClass > ul {
background-color: #5E5D5D;
color: #D8D8D8;
font-size: 20px;
font-family: sans-serif;
}
.navClass > ul > li {
list-style-type: none;
display: inline-block;
padding: 5px 25px;
position: relative;
}
.navClass > ul > li:hover {
background-color: #383838;
}
ul.sub-menu {
position: absolute;
background-color: #383838;
list-style-type: none;
width: 125px;
margin-top: 5px;
padding-left: 0pc;
margin-left: -25px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navClass li:hover .sub-menu {
opacity: 1;
background-color: #7b7b7b;
}
.navClass ul li a {
text-decoration: none;
color: #D8D8D8;
}
.sub-menu li:hover {
background-color: #383838;
}
/* Background */
/* ZeeFro */
.zeefro {
z-index: -1;
text-align: center;
}
/* Background */
.bg-main {
z-index: -2;
text-align: center;
} <!DOCTYPE html>
<html>
<head>
<title>ZeFrolity</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="zeefro">
<img src="http://ambebajaj.com/app/webroot/img/uploads/Homeslider/1458125292bikeprod-img.png" width="100%" height="100%">
</nav>
<nav class="bg-Main">
<img src="http://www.suttontrust.com/wp-content/uploads/2016/08/Coding.jpg" width="100%" height="100%">
</nav>
<nav class="navClass">
<ul>
<li><a href="">Contact Me</li></a>
<li><a href="">Home</li></a>
<li><a href="">About Me</li></a>
<li><a href="">Portfolio
<ul class="sub-menu">
<li><a href="">Logos</li></a>
<li><a href="">Banners</li></a>
<li><a href="">Twitch</li></a>
<li><a href="">Youtube</li></a>
</ul>
</li>
<li><a href="">Shop
<ul class="sub-menu">
<li><a href="">Graphics</li></a>
<li><a href="">Merch</li></a>
</ul>
</li>
<li><a href="">Social Media
<ul class="sub-menu">
<li><a href="">Twitch</li></a>
<li><a href="">Youtube</li></a>
<li><a href="">All</li></a>
</ul>
</li>
</ul>
</nav>
</body>
</html>我认为 z-index 1,2 和 3 会起作用，因为它们像层一样工作，但如果有人知道这个问题，请告诉我：D
正如你可以看到 png img（摩托车在页面顶部）和技术 jpg img 在它下面，我希望摩托车的背景几乎是技术
亲切的问候
Zefrolity
【问题讨论】：
-
我很困惑。您的 sn-p 似乎正在表现出您所要求的行为。你能澄清一下吗？
-
你可以看到 png img（摩托车在页面顶部）和技术 jpg img 在它下面，我希望摩托车的背景几乎是技术