html - 用于列表导航的 Sprite 背景跨度

Question

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

这是我的代码: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 ;
}

fiddle here