用窗口移動背景圖片

如何在調整窗口背景圖片的同時移動窗口？我使用的是精靈，但如果這樣做太困難，我可以將背景圖像更改爲單個圖像。我有我的代碼如下：用窗口移動背景圖片

html: 
<nav class="topNav"> 
    <ulstyle="list-style-type:none"> 
      <li id="daily_sale" style="display:inline"><a href="/DealOfTheDay.asp?deal=" class="deselect"></a></li> 
      <li id="my_account" style="display:inline"><a href="/login.asp" class="deselect"></a></li> 
      <li id="support" style="display:inline"><a href="/terms.asp" class="deselect"></a></li> 
      <li id="shopping_cart" style="display:inline"><a href="/shoppingcart.asp?" class="deselect"></a></li> 

</ulstyle="list-style-type:none"></nav>

我還包括2張圖片。第一個是在大約1200px處發生的事情。第二個是它在1000px上的樣子。我想要做的就是將'帳戶，支持，購物車'圖像放在一起，以便它們之間的空間不會改變。 '銷售'形象不應該移動。我需要JavaScript還是可以使用CSS來做到這一點？

menu at 1200 px menu at 100px

來源

2013-11-21 MrBlonde

你能提供的CSS也？你可以添加到一個jsFiddle或什麼？ – Ming

這不漂亮。我包括了我正在使用的媒體屏幕。 http://jsfiddle.net/MrBlonde/Uh5Uh/ – MrBlonde

我有兩個24顯示器，我只能看到一個區別，當我遇到我的第二個中途擴大，並從那裏收縮，因此jfiddle可能不是我們的最佳測試enviornment。 – MrBlonde

試試這個CSS：

#my_account, #support, #shopping_cart{ 
    position:fixed; 
}

來源

2013-11-21 01:01:38 busterroni

但是，當我調整瀏覽器大小時，它們會繼續滑動嗎？本質上，我想保持這個空間，我調整大小。類似於http://kershaw.kaiusaltd.com/上的頂層菜單設置 – MrBlonde

在你的jsfiddle，我得到了整個圖像水平拉伸爲我改變窗口寬度。這與其說是與你的距離增加，它的發生，因爲你的項目均位於絕對（所以每個項目的左邊緣將總是是距離彼此的距離）和自身擴大爲項目的寬度做你改變頁面寬度。

一旦窗口寬度小於1335px就停止。

簡而言之：您的媒體查詢與您的圖標搞混。它的拉伸圖像（因爲你的背景大小的使用比率，它是大小背景的項目，這也是一％的寬度，所以也越來越寬。）

http://jsfiddle.net/Uh5Uh/2/

#daily_sale a{ 
    background: url('http://phantomsupply.com/v/vspfiles/templates/223/images/homepage/daily sale button black site.png'); 
    background-repeat:no-repeat; 
}

基本上，去除背景尺寸（因此圖像不伸展）不與MIN-和max-寬度淤泥，交換關於這三個項目left屬性爲right屬性，設定的距離，並且將沒事的。

你只需要設置的身體，這樣的項目現在不重疊的最小寬度（因爲他們仍然絕對位置）。另外，用浮漂，而不是絕對定位的元素實現它。

來源

2013-11-21 01:47:16 Ming

我認爲關鍵問題是<a>大小爲零。所以你應該添加一個div到<a>標籤。請參閱我的修正案。順便說一下，在你應該添加ul li{float:left}讓李站在平鋪

http://jsfiddle.net/Uh5Uh/3/

來源

2013-11-21 01:59:45 Jesse

用窗口移動背景圖片

回答

相關問題