Question

我正在尝试将图片放在菜单背景上方。

我已尝试list-style-image和背景图片（在li和a标记上）。我该怎么做呢？带有菜单的图片：image from menu

橙色背景：这是菜单的背景（标签）

灰色框：这是我想要的菜单背景上方的图像。（'A'是菜单背景的位置。

    #nav ul li{
    font-weight: bold;
    float: left;
    margin-top: -5px;
    position: relative;
    padding: 6px 5px 0 15px;
    z-index: 99;
    height: 50px;
    background-position:left center;
    background-image: url(../images/bussel/menu-blad1.png) !important;
    background-repeat: no-repeat;

}
#nav ul li a{
    background-color: #feb24e;
    display: block;
    width: 153px;
    height: 35px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    margin: 10px 0px 0px 0px;
    position: relative;
    z-index: 98;
}

Answer 1

我已经完成了这个（div方式）：

链接：

<li><span class="blad"></span><a href="#">Groepen</a></li>

css：

    #nav ul li{
    font-weight: bold;
    float: left;
    margin-top: -5px;
    margin-right: 5px;
    position: relative;
    padding: 6px 5px 0 15px;
    z-index: 99;
    height: 50px;
    }

    #nav ul li a{
    background-color: #feb24e;
    display: block;
    width: 153px;
    height: 35px;
    color: #fff;
    text-decoration: none;
    margin: 10px 0px 0px 0px;
    }

    #nav ul li span.blad{
    width: 35px;
    height: 43px;
    background-position:left center;
    background-image: url(../images/bussel/menu-blad.png);
    background-repeat: no-repeat;   
    float: left;
    margin: 4px 5px 0px -15px;
    }

所以它有效，谢谢！

Answer 2

你能用这样的东西吗？（大致）：jsFiddle demo

只需使用div创建另一个float:left并将其更正为margin。然后你可以将你的图像放在这个浮动的div中。

Answer 3

使用z-index

示例：

<div style="position: relative;">
  <div style="position: absolute; left: 10px; top: 30px; z-index: 1;"> ONE </div>
  <div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> TWO </div>
  <div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> THREE </div>
</div>

第二个div位于前面，第一个div位于背景中。

Answer 4

你可以尝试这个

a{
position:absolute;
background:red;
width:10px;
height:10px;
}
li{
position:relative;
bacground:url(../);
padding:20px;
}

在背景上的菜单图象

4 个答案: