jquery选项卡菜单导航中的CSS Sprite图像问题
我目前有问题的图标，我放置在我的导航菜单为选项卡。我使用了一个在线图像css精灵创建者，它工作得很好。问题是现在的情况出现得不正确。我怎样才能解决这个问题？这是我的示例 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-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雪碧图像
回答 3
Stack Overflow用户
发布于 2012-08-02 21:08:41
精灵只适用于背景。删除启动器的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;
}我觉得这应该能起作用..。
Stack Overflow用户
发布于 2012-08-02 21:08:10
首先，您需要检查您的ID和类。ID是唯一的，不应该在代码中重复，而类正是用来重复的:重复。我会在做其他事情之前改变它。
第二，css是级联样式，所以首先读取哪种样式很重要。您正在定义类，然后将顺序background: url(images/tabdetails.png) no-repeat top left;分配给#pngIcon (左上角等效于background-position)。
第三和更重要的是，您应该给出<a>的背景，而不是使用图像。你的css没有被应用！
Stack Overflow用户
发布于 2012-08-02 21:14:39
您需要将特定的类分配给<a>元素。然后，您将把雪碧作为背景应用于其中的每一个。这里不需要<img>元素。
<li><a href="#tab-1" class="sprite-Final">1. Category</a></li>然后给这个锚元素一些填充到左边。也许大约35 32，因为图标有32个像素宽。这样做会将文本"1.类别“推到右边。对锚点进行任何调整，使文本与背景图标图像很好地对齐。line-height: X;属性最好是垂直对齐。
https://stackoverflow.com/questions/11785679
复制相似问题
腾讯云开发者
