2

我有两个背景图像，但我无法同时显示它们（其中一个是不可见的）。另一个问题是 li 元素的 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) 为什么 li 元素的 padding-top 不起作用？我希望 li 元素中的文本在按钮中具有顶部填充。

4

6 回答 6

2

您必须在锚标签内添加一个 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;
}

工作小提琴

于 2013-05-27T10:11:00.237 回答
0

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

于 2013-05-27T10:01:28.077 回答
0

你想达到这样的目标吗？

演示

答案 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

它将使整个列表可点击，并且您的填充也将起作用。

于 2013-05-27T10:10:33.123 回答
0

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

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

于 2013-05-27T10:13:27.190 回答
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 回答
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;

背景位置：200px 0px，左 0px；

于 2013-05-27T10:33:05.723 回答