0

我试图在我的菜单背景上方放置一个图像。

我已经尝试过list-style-image背景图片（在标签上）li。a我该怎么做呢？带有菜单的图像：来自菜单的图像

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

灰色框：这是我想要的菜单背景上方的图像。（“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;
}
4

4 回答 4

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;
    }

所以它有效，谢谢！

于 2013-04-23T10:58:11.023 回答
0

你可以试试这个

a{
position:absolute;
background:red;
width:10px;
height:10px;
}
li{
position:relative;
bacground:url(../);
padding:20px;
}
于 2013-04-22T11:50:30.563 回答
0

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

只需创建另一个div并float:left给出正确margin的 . 然后你可以把你的图像放在这个浮动的 div 中。

于 2013-04-22T10:12:02.777 回答
0

利用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 在背景上。

于 2013-04-22T10:12:33.907 回答