Question

好的，我有一个链接列表，如此

<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。为什么会发生这种情况，我该如何解决？

Answer 1

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

我建议您阅读a tutorial on CSS Sprites，以便更好地理解这个概念。

Answer 2

OP这就是你要找的你只需要添加height这里有一个链接到jsFiddle http://jsfiddle.net/ddcxb/1/告诉我这是你正在寻找的。

Answer 3

如何将css放到链接本身？像：

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

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

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

更改背景位置时背景图像会消失吗？

3 个答案: