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

このようなもので行くことができますか？(大まかに) : 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>

2 番目の div は前面にあり、最初の div は背景にあります。

于 2013-04-22T10:12:33.907 に答える