2

我目前在标签的导航菜单中放置图标时遇到问题。我使用了一个在线图像 css sprite 创建器，它运行良好。现在的问题是图片显示不正确。我该如何解决这个问题？这是我的示例 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 精灵图像

在此处输入图像描述

4

3 回答 3

1

首先，您需要检查您的 ID 和课程。ID 是唯一的，不应在代码中重复，而类正是为此：重复。我会先改变它。

其次，css是级联样式，所以先读取哪种样式很重要。您正在定义类，然后您将命令background: url(images/tabdetails.png) no-repeat top left;传递给#pngIcon（左上角相当于background-position）。

第三，更重要的是，你应该给背景<a>，而不是使用图像。你的css没有被应用！

于 2012-08-02T21:08:10.610 回答
1

精灵仅用于背景。删除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;
}

我认为这应该可以解决问题...

于 2012-08-02T21:08:41.540 回答
0

您需要将特定类分配给<a>元素。然后，您将把精灵作为背景应用到其中的每一个。你不需要<img>那里的元素。

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

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

于 2012-08-02T21:14:39.817 回答