jquery-ui选项卡菜单导航中的CSS Sprite Image问题

Question

我目前在使用我在导航菜单中放置标签的图标时出现问题。我使用了一个在线图像css精灵创建者，它运作良好。问题是现在图片显示不正确。我该如何解决这个问题？这是我的EXAMPLE 的 HTML

<ul>
<li><a href="#tab-1" class="pngIcon sprite-category">1. Category</a></li>
<li><a href="#tab-2" class="pngIcon sprite-description">2. Description</a></li>
<li><a href="#tab-3" class="pngIcon sprite-images">3. Images</a></li>
<li><a href="#tab-4" class="pngIcon sprite-contact">4. Contact Info</a></li>
<li><a href="#tab-5" class="pngIcon sprite-final">5. Final</a></li>
</ul>

CSS我从制作css sprite图像的网站获得了坐标

.sprite-final{  background-position: 0 0; width: 32px; height: 32px; } 
.sprite-category{ background-position: 0 -82px; width: 32px; height: 32px; } 
.sprite-contact{ background-position: 0 -164px; width: 32px; height: 32px; } 
.sprite-description{ background-position: 0 -246px; width: 32px; height: 32px; } 
.sprite-images{ background-position: 0 -328px; width: 32px; height: 32px; }


.pngIcon {
    padding: 0;
    background: url(http://webprolearner.ueuo.com/dropdown-menu/images/tabdetails.png) no-repeat top left;
    height: 32px;
    line-height: 32px;
    text-indent: 40px;
    margin: 0 5px;
    display: block;
}

CSS Sprite Image

Answer 1

首先，您需要检查您的ID和类。 ID是唯一的，不应该在代码中重复，而类正是这样：重复。我先改变它。

其次，css是级联样式，因此首先要读取哪种样式很重要。您正在定义类，之后您将订单background: url(images/tabdetails.png) no-repeat top left;发送到#pngIcon（左上角相当于background-position）。

第三个和更重要，您应该为<a>提供背景信息，而不是使用图片。你的css没有被应用！

Answer 2

精灵仅用于背景。删除初学者的img标记。 然后将.sprite-Final, ...类直接添加到a标记 还要为每个锚点添加一个类pngIcon（而不是#id，每个页面只能出现一次id！） 然后按如下方式更新你的css：

.pngIcon {
    padding: 0;
    background-image: url(images/tabdetails.png);
    background-repeat: no-repeat;
    height: 32px;
    line-height: 32px;
    text-indent: 40px;
    margin: 0 5px;
    display: block;
}

我认为应该这样做......

Answer 3

您需要将特定类分配给<a>元素。然后，您将精灵应用为每个精灵的背景。您不需要<img>元素。

<li><a href="#tab-1" class="sprite-Final">1. Category</a></li>

然后给左边的那个锚元素添加一些填充。也许类似于35px，因为图标宽32像素。这样做会将文本“1. Category”推到右侧。对锚点应用任何调整，以使文本与背景图标图像很好地对齐。 line-height: X;属性最好垂直对齐。