2

2 つの背景画像がありますが、両方を表示できません (一方は非表示です)。もう 1 つの問題は、li a 要素の padding-top が機能しないことです。

HTML:

<ul class="menu">
    <li class="item-101 current active"><a href="/">Home</a></li>
    <li class="item-102"><a href="/index.php/merchants-shops">Merchants / Shops</a></li>      
    <li class="item-103"><a href="/index.php/contact-us">Contact us</a></li>
</ul>

CSS:

* {
    margin: 0;
}

#left #menu ul.menu {
    list-style: none;
    padding: 0;
}

#left #menu ul.menu li {
   background: url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-   repeat, url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat;
    background-position: left 0px, 200px 0px;
   width: 294px;
   height: 44px;
   padding: 0 0 5px 0;
}

#left #menu ul.menu li a {
    text-transform: uppercase;
    text-decoration: none;   
    font-style: italic;
    padding: 15px 0 0 17px;
    color: #336699;    
}

ここで完全な例を参照してください: http://jsfiddle.net/BWagZ/

質問は次のとおりです。1) ボタンに 2 つの背景画像を表示する方法。最初の画像はボタンの背景画像と考えてよいでしょう。しかし、2 番目の画像は、ボタンの右側に表示される小さな矢印です。現在、この画像はまったく表示されません (ただし、どこかにあります)。

2) li 要素の padding-top が機能しないのはなぜですか? li 要素のテキストにボタンの上パディングが必要です。

4

6 に答える 6

0

あなたの方法は良いです。それらの間で画像を交換するだけです。意味：

background: url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat,  url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat;

background-position: 200px 0px、左 0px;

于 2013-05-27T10:33:05.723 に答える
0

z-index各背景にいくつか設定してみてください。また、矢印の画像を最初に配置すると、両方が表示されます..今はそれらを調整するだけです.

これで十分ですか？http://jsfiddle.net/goodfriend/BWagZ/10/

于 2013-05-27T10:13:27.190 に答える
0

リンクの li 要素にトップオフセットが必要だと思います。次に、a 要素ではなく、li 要素に padding-top を設定する必要があります。これは私 (Chromium) で機能します。私はあなたのイメージの問題を理解していません。

于 2013-05-27T10:01:28.077 に答える
0

背景の順序を変更する必要があります。

background: url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat 200px 0px,
   url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png) no-repeat left 0px;

そして、プロパティaを与えることで調整できる要素。line-height

どうぞ: http://jsfiddle.net/MrLister/yFMZf/1

于 2013-05-27T10:15:03.573 に答える