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

好了，所以我有一個鏈接列表，像這樣背景圖像在更改背景位置時會消失嗎？

<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;

現在的圖像的另一個版本開始出現，當我移動圖像爲5px下來使用的CSS背景位置。所以現在我可以看到新圖像的底部5px和舊圖像的頂部335px。爲什麼會發生這種情況，我該如何解決？

來源

2013-10-07 user2817200

OP這是你正在尋找的你只需要添加height這裏是一個鏈接到jsFiddle http://jsfiddle.net/ddcxb/1/告訴我，這是你在找什麼。

來源

2013-10-07 01:42:32

啊，這確實解決了它，謝謝..亞歷克斯W解釋爲什麼相當不錯。 – user2817200

它被稱爲CSS精靈。爲了減少在頁面上加載圖像所需的HTTP請求數量，所有圖像都被合併爲一個圖像。爲了在單個圖像內顯示圖像，每個元素（例如，li）的寬度和高度作爲視口，而background-position確定單個圖像的定位，就好像它是背景一樣，只有寬度和高度元素內的圖像是可見的。

我建議您閱讀a tutorial on CSS Sprites，以便您更好地理解這個概念。

來源

2013-10-07 01:35:00

如何把CSS鏈接本身？像：

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

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

然後嘗試使用固定的背景位置..？希望它能工作..

來源

2013-10-07 01:46:26 catzilla

嗯，仍然是同樣的問題，但增加高度確實解決了它，@Alex W解釋了它爲什麼修復它很好。 – user2817200

是的，對..我也試過@亞歷克斯的代碼，它的工作！ – catzilla

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

回答

相關問題