上面的背景菜單圖像

我想放置在我的菜單背景上方的圖像。上面的背景菜單圖像

我試過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; 
}

來源

2013-04-22 RunnicFusion

如果您提供您試圖實施的代碼，那會更好。可能是jsFiddle或jsBin。 – 2013-04-22 09:36:28

你可以去像這樣的東西（大約）：？jsFiddle demo

只需創建另一個div與float:left，並給它正確margin然後你。可以把這個裏面你的形象浮動DIV

來源

2013-04-22 10:12:02 Fallup

使用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-22 10:12:33 Flowen

我希望有一種方法可以在不使用div的情況下做到這一點。 – RunnicFusion 2013-04-23 10:35:21

ü可以試試這個

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

來源

2013-04-22 11:50:30 QArea

謝謝，但這不適合我 – RunnicFusion 2013-04-23 10:34:51

我做這個（股利方式）：

鏈接：

<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-23 10:58:11 RunnicFusion

上面的背景菜單圖像

回答

相關問題