更改背景位置時背景圖像消失了嗎？

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 Sprite。 為了減少在頁面上加載圖像所需的HTTP請求數量，所有圖像都組合為一個圖像。 為了在單個圖像中顯示圖像，每個元素（例如li ）的寬度和高度都用作視口，而背景位置確定單個圖像的位置就好像它是背景，而寬度和元素內圖像的高度是可見的。

我建議閱讀有關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;
}

然后嘗試使用固定的背景位置。 希望它能工作。