精灵背景跨度用于列表导航

Question

我在使用精灵图像作为导航图标时遇到了问题。我的背景位置偏移不仅不起作用，而且应该是整个导航长度上的背景图像，这几乎就像我需要定义所显示图像的宽度和高度一样。

这是我的代码：http://jsfiddle.net/spadez/737YT/1/

.navigation {
}
.navigation li {
}
.navigation li a {
    background: url(http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg) no-repeat left center;
    display: block;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 5px;
    margin-top: 5px;
}
.navigation li a:hover {
    background-color: #495C6D;
}
.navigation li a.active {
    background-color: #495C6D
}
#rss span {
    background-position: -15px 0;
}
#photos span {
    background-position: -30px 0;
}
#links span {
    background-position: -45px 0;
}

我在这里做错了什么？

Answer 1

类似这样的东西：

1. 从.navigation li a中删除背景图像
2. 此CSS

---

#links span,
#photos span,
#rss span {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url(http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg) no-repeat left center;
}
#rss span {
    background-position: -50px -65px;
}
#photos span {
    background-position: -330px -125px;
}
#links span {
    background-position: -130px -5px ;
}

小提琴这里

Answer 2

不仅仅是设置任何东西的宽度和高度。最后，由于您使用span元素来显示图像，因此需要做一些事情。

首先，您需要为span添加样式。这包括将背景移动到跨度，将其更改为内联块级元素，赋予其尺寸并防止溢出。

接下来，按照之前的尝试，按跨度适当地定位背景。

此处显示的修改样式：

.navigation li span {
    display: inline-block;
    background: url(http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg) no-repeat left center;
    width: 20px;
    height: 20px;
    overflow: hidden;
}
#rss span {
    background-position: -52px -68px;
}
#photos span {
    background-position: -90px -66px;
}