Question

我有两张背景图片，但我无法显示它们（其中一张是不可见的）。另一个问题是li a元素的填充顶部不起作用。

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）为什么li元素的填充顶部不起作用？我希望li元素中的文本在按钮中有顶部填充。

Answer 1

您必须在双重背景的锚标记内添加div并覆盖完整按钮区域查看小提琴

HTML

<div id="left">

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

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;
background-position: left 0px, 200px 0px;
width: 294px;
height: 30px;
padding: 14px 0 5px 0;
}

#left #menu ul.menu li a {
    text-transform: uppercase;
    text-decoration: none;   
    font-style: italic;
    color: #336699;
}
#left #menu ul.menu li a div {
    color: #336699;
    background:url(http://tax.allfaces.lv/templates/tax/images/bulta_peleka.png) no-repeat center right;
    width: 235px;
}

工作fiddle

Answer 2

我认为您希望链接在li元素中具有顶部偏移量。然后你必须在li元素中设置一个padding-top，而不是一个对我有用的元素（Chromium）。我不明白你的形象问题。

Answer 3

你希望得到这样的东西吗？

Demo

回答1 ：

更改图片的顺序并相应地定位。

用以下内容替换您的CSS：

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

回答2 ：

在以下行中添加display: block; css规则：

 #left #menu ul.menu li a

它会使整个列表都可以点击，你的填充也会起作用。

Answer 4

尝试为每个 z-index 设置一些background，当你首先放置箭头图像时，你会看到两个......现在你只需要调整它们。

这够好吗？ http://jsfiddle.net/goodfriend/BWagZ/10/

Answer 5

您应该更改背景的顺序。

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

Answer 6

你的方法很好。你只需要在它们之间交换图像。含义：

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，left 0px;

CSS多图像定位

6 个答案: