0

好的，我有一个链接列表，就像这样

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

我有一个 340x40（340 是长度）图像，当我将鼠标悬停在列表项上时，我希望它出现在列表项下方。所以我尝试的是这个

li:hover {
    background: url(../images/liHover.png);
}

当我这样做时，图像出现在列表项的正上方，而不是它的下方。所以我尝试添加

background-position: 0px 5px;
repeat: no-repeat;

这带来了一个问题。就好像将鼠标悬停在一个项目上后出现的图像位于一个 340x40 的虚构容器中。当我告诉它使用背景位置向下移动 5px 时，就好像图像向下移动，除了图像所在的容器没有向下移动。如果图像在虚拟容器内，我只能看到图像，并且虚拟容器向下不向下移动 5px，图像会，所以图像的 5px 消失了。我删除了

repeat: no-repeat;

现在，当我使用 CSS 中的背景位置将图像向下移动 5px 时，开始出现另一个版本的图像。所以现在我可以看到新图像的底部 5px 和旧图像的顶部 335px。为什么会发生这种情况，我该如何解决？

4

3 回答 3

1

它被称为 CSS 精灵。为了减少在页面上加载图像所需的 HTTP 请求数，所有图像都被组合成一个图像。为了在单个图像中显示图像，每个元素（例如 a li）的宽度和高度充当视口，而background-position确定单个图像的定位，就好像它是背景一样，只有宽度和高度元素内的图像的可见性。

我建议阅读有关 CSS Sprites 的教程，以便更好地理解这个概念。

于 2013-10-07T01:35:00.403 回答
1

OP 这就是你要找的东西，你只需要在height这里添加一个指向 jsFiddle http://jsfiddle.net/ddcxb/1/的链接，告诉我这是否是你要找的东西。

于 2013-10-07T01:42:32.957 回答
1

把css放到链接本身怎么样？像：

<ul>
    <li><a href="..."></a></li>
</ul>

a:hover {
    background: url(../images/liHover.png);
    background-repeat: no-repeat;
    background-position: fixed;
}

然后尝试使用固定的背景位置..？希望它会工作..

于 2013-10-07T01:46:26.353 回答