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

不仅仅是设置任何东西的宽度和高度。最后，由于您使用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;
}

Answer 2

这样的事情：

从.navigation li a
此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

精灵背景范围列表导航

2 个答案: